14

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.

6
  • 2
    Please describe the effect in detail. Not everyone uses Facebook. Also, I do use it, and I have no idea what you are talking about.
    – Pekka
    Aug 1, 2010 at 9:28
  • What title??? Are you talking about the <title> tag, a <div> in a page, something else? Programming is a specific science, so please be specific. Kinda............ is not very specific. Aug 1, 2010 at 9:33
  • OP's referring to the window title cycling between something like "New message from Foo Bar" and the regular one after receiving a new chat message, I suppose.
    – AdrianoKF
    Aug 1, 2010 at 9:34
  • 2
    @Darin Dimitrov, chrome does not have title bar, but you can see the title in tabs. Please notice...
    – Starx
    Aug 1, 2010 at 9:38
  • 4
    @Darin, I think I caught you in a bad mood
    – Starx
    Aug 1, 2010 at 9:38

3 Answers 3

38

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.
1
  • 2
    For those (like me) who didn't realise, cancelFlashTitle() will stop the flashing! Apr 30, 2013 at 14:28
12

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);
0
1
setInterval("var x='www.WHAK.com/Packer/',y='WHAK.com/Packer/',z=document;z.title=z.title==x?y:x",900);
2
  • It basically evals what's in the quotes every 900 milliseconds with a highly minified if statement (if its x, now make y or if it's y now make it x).You can minify your JS on javascript-packer.fav.cc
    – Dave Brown
    Jul 7, 2015 at 4:08
  • if(x==""){x=100}else{x=0}; will minify to x=""==x?100:0;
    – Dave Brown
    Jul 7, 2015 at 4:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.