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

Ваш сервис должен обеспечивать активное общение пользователей, постоянное обновление контента, требующее быстрой реакции участников? Как 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С-Битрикс». Мы реализуем полный цикл работ - от разработки логотипа и фирменного стиля будущей компании, до ее продвижения на рынок, используя максимально эффективные современные технологии.

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