Blinking document.title and IE7 (no way ?)

Question

Hello, i develop a website and i need let the document title blinking when the browser lost the focus to get the attention from the user.

This is a common task for example in some social network. Btw my javascript code work fine in Chrome, Firefox, Opera, but not in IE7 (that i am testing before release the site)

IE7 have a strange behavior because if i print the document.title in a debug text (you can see in the code), it's changed but the browser still show the previous document title

I try to search a lot on internet to try to fix this problem but with no luck so i decided to post the question in this site. Here my javascript code below and thanks in advance for the suggestions.

the JS method is called by this.blink(true)

// other methods above and below ....

this.blink = function(Action)
{
    if (Action)
    {
        if (!this.blinking)
            this.oldTitle=top.document.title;
        else
            clearInterval(this.blinkTimer);

        // debug current title
        $('debugText').value = 'ORIGINAL ' + top.document.title + '\n' + $('debugHistory').value;

        this.blinkTimer = setInterval(function() {

            var msg='MSG', newTitle

            if (top.document.title == msg)
                newTitle =  '----';
            else
                newTitle =  msg;

            // assign title
        top.document.title =  newTitle;

            // debug blinking, is really changed but not shown <---
            $('debugText').value = 'BLINK ' + top.document.title + '\n' + $('debugHistory').value;

         }, 1000);

    }
    else
    {
        clearInterval(this.blinkTimer);

        if (this.blinking)
            top.document.title = this.oldTitle;
    }

    this.blinking = Action; 
}

Answer 1

Instead of top.document.title try top.document.getElementsbyTagName('title')[0] (This is assuming top is some form of frame or window)

Answer 2

Try this in IE

this.blink = function (Action)
{
     if (Action)
    {

        if (!this.blinking)
            this.oldTitle=top.document.title;
        else
            clearInterval(this.blinkTimer);


        this.blinkTimer = setInterval(function() {

            var msg='MSG', newTitle

            if (top.document.title == msg)
                newTitle =  '----';
            else
                newTitle =  msg;

            // assign title
        top.document.title =  newTitle;


         }, 1000);

    }
    else
    {
        clearInterval(this.blinkTimer);

        if (this.blinking)
            top.document.title = this.oldTitle;
    }

    this.blinking = Action; 
}
  window.blink('now');​​​​

Mostly it will be an issue that window.onblur etc. is not triggering your blink function. If the above works, then you can use mouse movement to track timeout.

Answer 3

If you're using jQuery, I've made a plugin called Title Alert for the purpose of blinking notification messages in the browser title bar. With it, you can specify different options like duration, blinking interval, if the blinking should stop when the window/tab gets focused, etc. I've verified that the plugin works in IE6, IE7, IE8, Firefox, Chrome and Safari.

Here is an example on how to use it:

$.titleAlert("New chat message!", {
    requireBlur:true,
    stopOnFocus:true,
    interval:600
});

If you're not using jQuery, you might still want to look at the source code (there are a few quirky bugs and edge cases that you need to handle when doing title blinking if you want to fully support all major browsers).