views:

90

answers:

2

How to create flashing title effect like facebook? Means, when you are chatting with someone and a new message is received, a title starts to switch between the original title and a message informing user of the arrival of new message giving a flashing effect.

Explanation by AdrianoKF

Notice the window title cycling between something like "New message from Foo Bar" and the regular one after receiving a new chat message.

+2  A: 

Set an interval that switches the title every few seconds. Untested code:

function flashTitle(pageTitle, newMessageTitle)
{
    if (document.title == pageTitle)
    {
        document.title = newMessageTitle;
    }
    else
    {
        document.title = pageTitle;
    }
}

setInterval("flashTitle('Facebook', 'New message from John Doe!')", 800);
BoltClock
wow, i didn't thought this would be this simple. Thanks though
Starx
+5  A: 

Code:

(function () {

var original = document.title;
var timeout;

window.flashTitle = function (newMsg, howManyTimes) {
    function step() {
        document.title = (document.title == original) ? newMsg : original;

        if (--howManyTimes > 0) {
            timeout = setTimeout(step, 1000);
        };
    };

    howManyTimes = parseInt(howManyTimes);

    if (isNaN(howManyTimes)) {
        howManyTimes = 5;
    };

    clearTimeout(timeout);

    step();
};

window.cancelFlashTitle = function () {
    clearTimeout(timeout);
    document.title = original;
};

}());

Usage:

flashTitle("New Message from Matt Lunn");

or

flashTitle("New Message from John Smith", 10); // toggles it 10 times.
Matt