Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create the title alert effect like Facebook?

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.

like image 573
Starx Avatar asked Aug 01 '10 09:08

Starx


3 Answers

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;
    };

    cancelFlashTitle(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.
like image 156
Matt Avatar answered Nov 05 '22 10:11

Matt


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);
like image 21
BoltClock Avatar answered Nov 05 '22 10:11

BoltClock


setInterval("var x='www.WHAK.com/Packer/',y='WHAK.com/Packer/',z=document;z.title=z.title==x?y:x",900);
like image 1
Dave Brown Avatar answered Nov 05 '22 09:11

Dave Brown