Как отследить потерю фокуса вкладки в браузере

В современных браузерах есть очень полезный инструмент - Page Visibility API. Он позволяет узнать, когда вкладка с веб-страницей видна пользователю, а когда пользователь находится на другой странице. Через Page Visibility API можно установить обработчик для реагирования на изменение состояния видимости. Для чего это надо? Например, если сайт открыт на мобильных устройствах, то при переходе на другую вкладку есть смысл отключить ненужные сетевые запросы, всякие спецэффекты, динамическое обновление контента и прочие ресурсоемкие операции. В веб-приложениях, например, можно сделать автоматическое сохранение незаполненной формы при переходе на другую вкладку. На моем сайте при потере фокуса вкладки активируется опция "камуфляж".

Читать статью целиком »

Placeholder для изображений на JavaScript

При разработке сайтов одна из главных задач - правильное размещение контента, в том числе и изображений. Но часто случается ситуация, когда заказчик еще не предоставил материал, а что-то показать ему уже надо. В таких случаях используют "рыбы", или, если по-английски, "placeholder". Для текстового контента это классический "Lorem ipsum..." или какие-нибудь программные генераторы. Для графического контента есть различные онлайновые сервисы, которые предоставляют картинки-placeholder'ы (про них будет отдельная статья). А я решил сделать динамический генератор картинок-пустышек на JavaScript.

Читать статью целиком »

Обработка двойного тапа с задержкой на JavaScript

Обычно для обработки двойного клика на каком-нибудь элементе HTML-страницы используется событие ondblclick. Но у ondblclick есть большой недостаток: при задании обработчика нельзя устанавливать произвольный интервал между первым кликом (тапом на экране мобильного устройства) и последующим кликом. Кроме того, я встречал в интернетах информацию, что на некоторых мобильных устройствах событие ondblclick передается как два последовательных события одиночного нажатия onclick.

Читать статью целиком »

Таблица с фиксированной шапкой на JavaScript

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

Начнем с верстки. Для корректной работы скрипта нужно выполнение всего несколько требований. Таблица, у которой будет фиксироваться заголовок, обязательно должна иметь атрибут id и фиксированную ширину. Шапка таблицы должна быть обрамлена тегом thead. Например:Обычно при верстке HTML я никогда не использую thead, но тут этот элемент необходим, чтобы обозначить границы и содержимое шапки таблицы. Дополнительных обрамляющих элементов для таблицы не требуется.

Читать статью целиком »

Рейтинг на CSS и JavaScript

Один из ставших привычным элементов web-страниц - рейтинг. Это может быть средняя пользовательская оценка какой-нибудь статьи, популярность товара или что-нибудь подобное. Обычно рейтинг представляет собой полоску с пятью или десятью звездочками, часть из которых серая, а часть, соответствующая значению рейтинга, - золотистая. Сегодня я расскажу, как сделать отображение такого рейтинга и как он может взаимодействовать с пользователем.

Читать статью целиком »