4 заметки с меткой jQuery
📅 16 декабря 2018

Плавная прокрутка страницы к якорю с сохранением хеша на jQuery

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

Чтобы это исправить, будем использовать плавную прокрутку на javascript или jquery. Плавная прокрутка до элемента ясно даёт понять, что мы остались на том же сайте, и куда именно прокрутилась страница.

План скрипта

Обычная функция типа scrollTo делает прокрутку, но это было бы слишком грубо и не учитывало все нюансы. А вот что требуется от правильного скрипта:

1) отменить стандартные действия браузера при клике по таким ссылкам;
2) определить расстояние до элемента, к которому нужно прокрутить;
3) плавно, то есть, без тормозов прокрутить страницу на это расстояние;
4) изменить window.location.hash — часть адреса страницы после решётки #.

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

📅 5 февраля 2016

Калькулятор стоимости поездки

автовозов.рф/расчет-онлайн

Калькулятор нужен для того, чтобы человек прикинул, сколько будет стоить поездка из точки А в точку Б. При подсчёте учитывается марка автомобиля, количество грузчиков, время в пути, а также через какие тарифные зоны Москвы или Подмосковья проходит маршрут.

Этапы работы калькулятора

  • Главные поля — откуда и куда, а справа — карта с тарифными зонамиГлавные поля — откуда и куда, а справа — карта с тарифными зонами

Повышение доверия

Показательно, что многие посетители вводят только адрес старта и финиша. Если их устраивает цена, они не доводят заказ до конца, а сразу же звонят. Уточнив детали у менеджера, они радуются, что сумма поездки совпадает с цифрами из калькулятора. Таким образом, калькулятор работает на повышение конверсии и доверия.

📅 4 мая 2013

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

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

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

Демо

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

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

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

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

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

📅 17 декабря 2012

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

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

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

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

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

Я был в роли Джека Воробья )

Иван ТитовИван Титов
Веб-дизайнер,
разработчик
★ Москва
© 2004 – 2019