Блог студії веб-дизайну «make a site»

Блог студії веб-дизайну «make a site»

Кілька слів про миготливому title

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







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

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







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

Тому ми динамічно створюємо довільний контейнер з id saved-title і копіюємо в нього вміст контейнера title. Якщо цей шар вже є, то ми його більше не чіпаємо, інакше його вміст заміниться на текст повідомлення. Загалом все просто і зрозуміло. І не забудьте шар saved-title зробити невидимим.

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

Працюючий приклад ви можете подивитися на цій сторінці.

На цьому все. Тепер ваша вкладка почне блимати з інтервалом в 1 секунду і її заголовок буде змінюватися, що досить добре привертає увагу і подія, що відбулася в цій вкладці не залишиться непоміченим.







Схожі статті