Lintel's Blog

How to blink browser tab

 Mon 15 June 2015 by Godson

Have you ever wanted to blink/flash browser tab on certain activity ?

Here is a scenario : Suppose there's a chat application installed on your website. Now what if the user of your website is having multiple tabs opened in his browser and there is an incoming message? How will you make your user realize that there is an incoming message on your website? Of course you can play some music, but it's having some limitations (for instance, user may be listening to some songs or speakers could be muted). If user's not doing any of these then also he has to go through each and every single tab opened in his browser and figure out from which tab the sound is coming.

Visual blinking is the best way to get user's attention & the easiest way to do that is to keep blinking the title of your website until user returns.

Here's a JavaScript function to do so :

var blinkTab = function(message) {
        var oldTitle = document.title,                                                               /* save original title */
                timeoutId,
                blink = function() { document.title = document.title == message ? ' ' : message; },  /* function to BLINK browser tab */
                clear = function() {                                                                 /* function to set title back to original */
                        clearInterval(timeoutId);
                        document.title = oldTitle;
                        window.onmousemove = null;
                        timeoutId = null;
                };

        if (!timeoutId) {
                timeoutId = setInterval(blink, 1000);
                window.onmousemove = clear;                                                          /* stop changing title on moving the mouse */
        }
};

Just execute the function like below and browser will start blinking :

blinkTab("your message");