16 заметок с меткой javascript

Сайт Братьев Бондаренко

bbondarenko.ru

Новая версия сайта Братьев Бондаренко выгодно отличается от предыдущей. Теперь на первом плане — фотографии, музыка, видео. Полезное пространство экрана используется на полную.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • След. →
  • Главная страница: большая фотка и предложение запустить демо-роликГлавная страница: большая фотка и предложение запустить демо-ролик
    Новости: отмечается время и телеканал выступленияНовости: отмечается время и телеканал выступления
    Фотогалерея: превьюшки занимают всю высотуФотогалерея: превьюшки занимают всю высоту
    На сером фоне нотки: приятная мелочьНа сером фоне нотки: приятная мелочь
    Видео: превьюшки занимают всю ширинуВидео: превьюшки занимают всю ширину
    Биография: здесь намёк на журналБиография: здесь намёк на журнал
    Контакты оформлены очень скромно :)Контакты оформлены очень скромно :)

Сайт занимает всю ширину и высоту на любом мониторе или планшете (на смартфоне поддерживается только горизонтальная ориентация). Пункты меню переключаются без перезагрузки страницы.

Фишка сайта — постоянный плеер в нижней части:

Плеер работает на любом устройствеПлеер работает на любом устройстве

Замечу, что плеер включается только по желанию пользователя, а песня не прерывается при переходе в другой раздел сайта. Это классно: запустил красивую музыку и спокойно изучаешь сайт. А если открыть видео, то плеер ставится на паузу.

Простой счётчик переходов по ссылкам на сайте

Возникла задача проследить, на какие ссылки кликает пользователь на сайте. С использованием jquery клиентский скрипт получился очень простым: вешаем событие на всю страницу, если кликнули по ссылке — отправляем аяксом все нужные параметры (ссылка, её координаты на странице, браузер и т.д.)

Чтобы сработало обычное действие ссылки (и события от других счётчиков), функция возвращает true, не дожидаясь успешного ответа от сервера.

<script src="jquery.js"></script> //подключаем jquery
var vizit_start = Math.round(new Date().getTime() / 1000); //запоминаем время захода на страницу (timestamp в секундах)
$('body').click(function(e) {
var a_click=e.target; //a_click - объект, по которому кликнули
if($(a_click).is('a')) { //если это ссылка, то отправляем данные
var a_pos=$(a_click).position(); //теперь переменная a_pos хранит координаты объекта
var vizit_sec = Math.round(new Date().getTime() / 1000) - vizit_start; //время визита = разница во времени
$.ajax({ //отправка данных аяксом
url:"http://site.ru/sledilka.php", //куда отправляем данные
type:"POST", //методом POST
data:{
page:location.href, //адрес текущей страницы
width:$("html").width(), //ширина страницы (контента)
height:$("html").height(), //высота страницы (контента)
left:a_pos.left, //координата ссылки X
top:a_pos.top, //координата ссылки Y
url:$(a_click).attr('href'), //куда ведёт ссылка
txt:$(a_click).text(), //текст ссылки
browser:navigator.userAgent, //инфа о браузере и ОС
vizit:vizit_sec //время визита в секундах
},
dataType: "text" //данные представлены как текст
});
}
return true;
});

Серверная часть принимает данные POST-ом (например, время визита: $_POST["vizit"]) и записывает в базу. Визуализация этих данных выходит за рамки этой заметки. Например, можно нарисовать карту кликов, как в Яндекс.Метрике. Но даже по текстовым таблицам уже можно сделать выводы.

Сортировка таблицы на jquery без плагинов

Встала задача отсортировать таблицу на яваскрипте по любому столбику. Известный всем плагин tablesorter у меня не заработал, и я решил, что быстрее и удобнее будет написать свой скрипт. Вот, что получилось через час:

Прямая и обратная сортировка таблицы по разным столбикамПрямая и обратная сортировка таблицы по разным столбикам

Демо

Скрипт получился из 20 строк, 1 кб (готовый tablesorter весит 13 кб и дольше «усваивается»). Ещё одно отличие: подготовительные операции для сортировки происходят по клику; это имеет смысл, потому что сортировка нужна не всем.

Первым делом нужно присвоить идентификаторы каждой строчке таблицы. Это лучше сделать сразу на сервере при выводе таблицы:

<tr id="z_1" ><td> ... </td></tr>
<tr id="z_2" ><td> ... </td></tr>
...

Теперь идентификатор будет привязан к строке с данными, и если её переставить в другое место, ничего не перепутается.

▼ Читать дальше

Определение координат полигонов на Яндекс.Картах

Яндекс запустил новый конструктор карт, и теперь собственная карта с пометками вставляется всего одной строчкой скрипта. Это удобно для большинства пользователей, но в новом коде встраивания нет координат объектов.

Выкладываю свой скрипт, который выводит координаты полигонов, центра карты и значение зума.

Клик по карте включает режим рисования полигона, следующим кликом ставится первая точка полигона (и так далее). После завершения (клик по точке → завершить) можно таким же образом рисовать следующий полигон. По нажатию кнопки в текстовом поле отобразятся координаты всех полигонов (в порядке рисования), потом центр карты и зум.

Захват большой Яндекс.Карты для печати

(Это обучающая статья. Если вы хотите заказать карту, вам сюда: plunix.ru/yandeks-ili-gugl-karta...)

В предыдущей заметке я рассказал, как захватить большое изображение (карту) по частям при помощи скриншотов и Фотошопа. Однако если есть средства для управления картой (API), то можно лёгким движением получить карту любого размера:

Такая карта получится в итогеТакая карта получится в итоге

Зачем вообще такая большая карта? Неужели нельзя проматывать её на экране, или купить карту нужной области, повесить на стенку и втыкать в неё флажки?

С помощью инструментов Яндекс.Карт на карте можно расположить «умные» метки (например, разноцветные), маршруты и любую другую информацию. Эти операции можно выполнить вручную или автоматически. Потом карта с информацией печатается, вешается на стенку: это удобно, потому что видно сразу всю карту, а не только её часть. После распечатывания остаётся возможность порисовать на готовой карте.

Или вот ещё идея: распечатать карту с крестиками, а в них воткнуть настоящие флажки. Если объектов сотня, экономится немало времени.

Захват карты в 2 шага

Нам нужно:
1) отобразить карту необходимого масштаба и размера в браузере,
2) сохранить всю страницу в виде картинки (в том числе фрагменты, выходящие за область экрана).

▼ Читать дальше

Выбор персонажа

Вчера мы ходили к моей сестре Кате на День рождения. Все гости были в костюмах сказочных героев — это Катя такой сценарий придумала. А меня попросила решить задачу распределения ролей с такими условиями:

— чтобы Катя не знала, кто кого выбрал (до тех пор, пока гости не зайдут в дверь),
— чтобы каждый выбрал персонажа из списка, и при этом не было повторов,
— желательно обойтись без бумажек, звонков и переписки.

Кажется, это идеальные условия для создания онлайн-сервиса:

Онлайн-сервис выбора персонажа написан «на коленке» при помощи jquery, php и mysql. Все запросы идут по ajax. Работает на любых устройствах, где есть интернет. Кате осталось только разместить ссылку вКонтакте — и на следующий день все уже выбрали свои роли.

Да, я был в роли Джека Воробья :) Фотки выложу попозже :)

Расчёт маршрута (API Яндекс.Карт)

Доделал сервис расчёта маршрутов для сайта «МК-Лидер» (с помощью API Яндекс.Карт). Задача была непростая: внутри МКАД одни расценки, за МКАД — другие. Например, для сквозного маршрута через МКАД из Зеленограда до Красногорска нужно рассчитать 5 участков:

1) выезд от базы до Зеленограда,
2) Зеленоград — МКАД,
3) кусочек по МКАДу,
4) МКАД — Красногорск,
5) возврат из Красногорска на базу.

Кроме путей по Москве (внутри МКАД) есть маршруты сквозные, из Москвы в Московскую область (или наоборот), а также только по МО:

Маршрут через МКАДМаршрут из Москвы в МОМаршрут по МО

▼ Читать дальше

Эко-упаковка от EKOFRIEND

ekofriend.com

На сайте можно заказать красивую экологически чистую упаковку (пакеты, корзиночки, коробочки). Дизайн хорошо передаёт эко-направленность:

Главная страницаГлавная страница

Мною выполнены вёрстка, дорисовка недостающих элементов и программирование.

▼ Читать дальше

Интернет-магазин одежды cs-fashion.ru

cs-fashion.ru

Наконец-то я завершил разработку интернет-магазина cs-fashion.ru:

На главной странице — флешка и каталогНа главной странице — флешка и каталог

По различным причинам эта работа затянулась почти на год. Восхищаюсь бесконечным терпением заказчицы :)

▼ Читать дальше

Таблица Менделеева

Не так давно изменилась привычная форма таблицы Менделеева. Новая принятая форма выглядит так:

Интерактивная таблица МенделееваИнтерактивная таблица Менделеева

Искомые элементы подсвечиваются при вводе. Можно искать по названию (или его части), обозначению, атомной массе — короче говоря, по любому параметру из таблицы.

Посмотреть сервис в работе: Таблица Менделеева на xumuk.ru.

▼ Читать дальше

Сервис ЕГЭ для XuMuK.ru

Тесты по ЕГЭ в форме привычных бланков:

Автопереключение: ответили на 13-й вопрос, сразу включается 14-йАвтопереключение: ответили на 13-й вопрос, сразу включается 14-й

▼ Читать дальше

Поиск законов для «Правотеки»

Небольшой сервис поиска законов и статей в режиме реального времени для сайта «Правотеки»:

Всего 3 клика мышкой — и нужный закон перед вамиВсего 3 клика мышкой — и нужный закон перед вами

Сайт VODALUX’а

vodalux.ru

На сайте представлены основные подразделения компании. Каждая кнопка слева ведёт либо на галерею, либо на нужный адрес. Галерея — это «разбросанные» фотки, которые увеличиваются при наведении.

Основной сайт компании VODALUXОсновной сайт компании VODALUX

Весь сайт — это одна страница (разделы переключаются скриптами без перезагрузки). Здесь такой ход оправдан тем, что информации на сайте почти нет.

© Дизайн не мой (я просто разверстал и использовал яву-скрипт :)

Калькуляторы услуг для «Гудвила»

В каждом разделе сайта компании «Гудвил», где имело смысл делать калькулятор, расположился соответствующий значок:

Нажимаем и попадаем на нужный калькуляторНажимаем и попадаем на нужный калькулятор

Допустим, вы заинтересовались услугами для ИП с работниками и читаете этот раздел сайта. Тогда откроется нужный калькулятор с нужными вам функциями, и не нужно будет разбираться в каком-то универсальном сервисе с кучей параметров.

Правильно заполнены не все пунктыПравильно заполнены не все пункты

▼ Читать дальше

Гальванопара для XuMuK.ru

ГальванопараГальванопара

Оригинал сервиса на сайте xumuk.ru:
Определение полярности электродов и ЭДС гальванического элемента.

Конвертер величин для XuMuK.ru

В русском интернете можно найти 2-3 приличных конвертера величин. Теперь появился ещё один сервис, в стиле сайта XuMuK.ru:

Лошадиные силы переводим в киловаттыЛошадиные силы переводим в киловатты

Тестируем: Перевод физических величин на xumuk.ru.

▼ Читать дальше

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017