Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Мигающий заголовок (title) в браузере на JavaScript

Наверняка многие из вас знают о чем речь, когда мы говорим о мигающем title во вкладке браузера. Этот прием очень удобен и часто используется для привлечения внимания в социальных сетях, таких как Одноклассники, Вконтакте, Badoo и прочих. В этой статье мы рассмотрим скрипт мигающего title для показа различных уведомлений.

Мигающий заголовок (title) в браузере на JavaScript
Содержание статьи

Несколько слов о мигающем title

Зачем вообще это нужно? Зачем title должен мигать? Такой вопрос мог возникнуть у вас после того, как вы прочитали заголовок статьи. А дело вот в чем - представьте, что вы зашли в социальную сеть через обычный браузер на компьютере, допустим через Firefox. Вы посмотрели ленту, фотографии и т.д. и вдруг решили зайти еще на какой-то сайт, при этом не закрывая страницу соцсети, а просто открыли его в новой вкладке, а затем вы могли открыть еще несколько вкладок, как это часто бывает.

А теперь представим, что вы уже находитесь совсем на другом сайте и чем-то там увлечены, а в этот момент вам приходит какое-нибудь важное сообщение в социальной сети, которая открыта у вас в первой вкладке и вы можете увидеть его очень не скоро, если оно не будет сопровождаться звуковым сигналом. Именно для этого и придумали мигающий title. После прихода сообщения заголовок вкладки социальной сети начнет мигать с определенным интервалам, поочередно показывая то обычный title страницы, например "ВКонтакте", то текст "1 новое сообщение". В 100% случаев вы обязательно обратите на это внимание и перейдете на эту вкладку. Таким образом важное сообщение будет прочитано и все останутся довольны. Данный пример - это лишь один из случаев, при котором может понадобиться данная функция, а вообще таких случаев может быть довольно много.

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

Скрипт мигающего заголовка (title)

Ну что же, когда области применения мы с вами рассмотрели, а также убедились в полезности и удобности уведомлений в title страницы, пора приступить к реализации. Как всегда, мы ничего не брали из интернета и разработали собственную простейшую функцию, которая отлично показала себя на практике.

function titleAlert() {
	var r = '1 новое сообщение';
	var t = document.title;
	
	if(!$("div").is("#saved-title")) {
		$("body").append('
' + t + '
'); } var st = $("#saved-title").text(); if(t != r) { document.title = r; } else { document.title = st; } }

Пускай текстом абстрактного уведомления будет "1 новое сообщение". Теперь нам нужно как-то запомнить текущий заголовок страницы и поочередно вставлять его в тег title, чередуя с текстом уведомления. Можно было просто каждый раз считывать содержимое первого заголовка h1, потому что в нем обычно дублируется содержимое контейнера title, но потом мы решили отказаться от данного решения, т.к. к заголовку страницы обычно еще добавляется подпись, которой нет в теге h1, например - "О компании | Google".

Поэтому мы динамично создаем произвольный контейнер с id saved-title и копируем в него содержимое контейнера title. Если этот слой уже есть, то мы его больше не трогаем, иначе его содержимое заменится на текст уведомления. В общем все просто и понятно. И не забудьте слой saved-title сделать невидимым.

Далее нам осталось просто вызвать нашу с вами функцию, используя старый добрый setInterval, допустим с интервалом в 1 секунду:

setInterval("titleAlert()", 1000);

Работающий пример вы можете посмотреть на этой странице.

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





Предыдущая статья:
Параллакс эффект. Простой пример параллакс слайдера

Читайте также:
Якорь на jQuery. Плавная прокрутка до якоря

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»