Отслеживаем активность пользователя на странице

30 ноября 2014 Антон Кулешов 1526 0

Сегодня мы рассмотрим способ определения активности пользователя на странице, и в этом нам поможет JavaScript библиотека ifvisible.

Реклама

Живет ifvisible на github. С примером её использования вы можете ознакомиться в материалах «демо». Там вы увидите, как страница будет реагировать на пользователя, находящегося в неактивном состоянии. Если вы перейдёте на другую вкладку, свернёте или просто не будете двигать мышью, то через 30 секунд окно изменит прозрачность. Все ваши действия на этой странице отпишутся в логах, которые там же вы сможете и увидеть.

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

if(ifvisible.now()){
	// Делаем что-то
}

Если ваш пользователь решил перейти на другую вкладку, то это можно отследить, используя следующий код:

ifvisible.on("blur", function(){
	// Ушел со страницы
	// Делаем что-то
});

ifvisible.on("focus", function(){
	// Вернулся
	// Делаем что-то
});

Когда пользователь стал неактивен на странице, то это можно отследить таким образам:

ifvisible.on("idle", function(){
	// Пользователь не активен
	// Делаем что-то
});

ifvisible.on("wakeup", function(){
	// Проснулся
	// Делаем что-то
});

Задержка перехода в ждущий режим составляет по умолчанию 60 секунд. Это время можно изменить:

ifvisible.setIdleDuration(10);

Также всеми событиями можно управлять отдельно:

// Переведет страницу в ждущий режим
ifvisible.idle();

ifvisible.idle(function(){
	// Этот код заработает, 
	// когда страница перейдет в ждущий режим
});

// Другие методы
ifvisible.blur();
ifvisible.focus();
ifvisible.idle();
ifvisible.wakeup();

При помощи библиотеки вы можете установить свои интервалы, если пользователь перешел в неактивное состояние:

// Если страница активна, эта функция будет выполняться каждые полсекунды.
ifvisible.onEvery(0.5, function(){
	// Анимировать «лого» только,
	// когда страница активна
	animateLogo();
});

Как видите довольно полезная библиотека и удобная, а на этом у меня всё.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

jQuery плагин dotdotdot - обрезка длинного текста

29 ноября 2014 Антон Кулешов

Сегодня пойдет речь об инструменте, который позволяет с помощью jQuery обрезать длинный текст до нужного размера. Причем, в результате мы получаем не просто блок с текстом «сколько влезло – столько влезло», а лаконично законченный отрывок длинного текста с тремя точками в конце, указывающими на продолжение. Ко всему, это - довольно распространённая задача. Чаще всего ею занимаются в серверной части движка сайта. Но если вдруг вам потребуется выводить текст в зависимости от высоты блока, то тут может пригодиться плагин dotdotdot.

21 эффект для ссылки

3 августа 2015 Антон Кулешов

Как оформить ссылку на сайте? Этот вопрос наверно один из самых простых, возникающих у веб-разработчика, тем более что до недавнего времени и вопроса, как такового и не было – редко кто менял даже стандартный набор цветов. Появление CSS3 внесло значительные изменения в «серые будни» и страницы «расцвели». Мы уже рассматривали ранее множество различных ховер эффектов, сегодняшняя же CSS библиотечка – заточена под ссылки, хотя, приведенные в ней эффекты легко можно применить и для других элементов страницы. Библиотека содержит следующие эффекты: ссылки при наведении вращаются, меняют перспективу, перестраивают бордеры, фиксируют взгляд, создают эффект куба, вызывают всплывающую подсказку, заключаются в скобки и много других причудливых выделений.

Запрещаем ввод любых символов кроме чисел при помощи jQuery

16 сентября 2014 Антон Кулешов

Сегодня я расскажу о полезном сниппете, используя который, можно организовать запрет ввода символов в поля формы. Подобный функционал очень важен для защиты от хакерского взлома, ведь мало кто обрадуется, зайдя в одно прекрасное утро на свой сайт и увидев табличку «hacked by Вася Пупкин». Помните, проверять поля форм на наличие «вредоносных» символов очень важно!