+7 495 008 8452
  • Загрузка
Выберите ваш цвет

Количество оповещений во вкладке браузера

Ваш сервис должен обеспечивать активное общение пользователей, постоянное обновление контента, требующее быстрой реакции участников? Как Gmail, Facebook, Twitter? Все они используют функционал отображения количества обновлений в заголовке страницы (закладка браузера). Хотите сделать такой же? Почему бы и нет.

Здесь мы предполагаем, что количество оповещений уже известно. Организуем вывод изменений на JavaScript.

Текстовый вывод

Во-первых, зададим переменную document.title, которая получит текущее название страницы

var title = document.title;

Запишем новую функцию, меняющуб часть названия страницы:

function changeTitle() {
count++;
var newTitle = '(' + count + ') ' + title;
document.title = newTitle;
}

Теперь запустим новую функцию, проверяющую обновления страницы

function newUpdate() {
update = setInterval(changeTitle, 2000);
}
var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

Вывод с помощью Favico.js

Этот способ дает более зрелищную картинку. Давайте используем библиотеку Favico.js, разработанную Miroslav Magda.

Первым делом зададим параметры Favico: цвет текста, фоновый цвет, положение, анимация.

var favicon = new Favico({
position :'up',
animation :'popFade',
bgColor :'#dd2c00',
textColor :'#fff0e2'
});

Следующие две функции обеспечат вывод текстовых значений на favicon.

var num = 0;
function generateNum() {
num++;
return num;
}

function showFaviconBadge() {
var num = generateNum();
favicon.badge(num);
}

function newUpdate() {
update = setInterval(showFaviconBadge, 2000);
}

var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

Пользуйтесь! Довольный пользователь лояльней и щедрее.

Удачи вам! Опытом использования инструментов разработки программного продукта поделилась с вами Веб-студия "АКРИТ". Разработка и продвижение сайтов на CMS «1С-Битрикс». Мы реализуем полный цикл работ - от разработки логотипа и фирменного стиля будущей компании, до ее продвижения на рынок, используя максимально эффективные современные технологии.

Назад в раздел

Подписаться на новые материалы раздела:
Загрузка...

* Источник использованных инструментов