Knowing when a user is looking at your site in the browser vs another tab/application

Question

Possible Duplicate:
test if window has focus

A site I frequently use has an online chat function (a pop up window, very similar to facebook). When my browser is not on the tab for this site, an alert is sounded to warn me of any new chat messages recieved, and when my browser is not on the tab for this site, the sound does not occur (by design I assume).

How is this achieved? How does the code (javascript I assume and therefore executed on my client side) know when I am/am not looking at the site?

Thanks

Answer 1

A comprehensive answer based on other comments from above. Yes it is mostly a repeat question, but it was nicely asked so it would remain in the unanswered questions vault forever if someone did not answer it. To other people with this question finding this answer, please refer to the other linked topics in the question comments.

<BGSOUND id="BGSOUND_ID" LOOP=1 SRC="jsilence.mid">

<script type="text/javascript" language="JavaScript">

    function onBlur() {
        document.body.className = 'blurred';
    };
    function onFocus(){
        document.body.className = 'focused';
    };

    if (/*@cc_on!@*/false) { // check for Internet Explorer
        document.onfocusin = onFocus;
        document.onfocusout = onBlur;
    } 
    else {
        window.onfocus = onFocus;
        window.onblur = onBlur;
    }

    function playSound(audioURL) 
    {
        if (document.body.className == 'blurred')
        {
            if (document.all) 
            {
                document.all['BGSOUND_ID'].src=audioURL;
            }
            else 
            {
                self.iplayer.location.replace('jsplayer.htm?'+audioURL);
            }

            setTimeout("stopSound();", 500);
        }
    }

    function stopSound() 
    {
        if (document.all) 
        {
            document.all['BGSOUND_ID'].src='jsilence.mid';
        }
        else 
        {
            self.iplayer.location.replace('jsplayer.htm?stop');
        }
    }

    function NewMessage(message)
    {
        ShowMessage(message);
        playSound('ding.mid');
    }

</script>

This code will use IE & opera's BGSound tags to play a sound if the user is using either of those browsers, otherwise it assumes there is an iframe on the page named iplayer and uses an embeded 3rd party player. See the source for details.

1. Focus code source: Here
2. Sound Playing Source: Here