My coworker wrote a quick mvc chat application so we can chat about work stuff without leaving our desks.

What are some ways to indicate to each other a new message has been posted? My first thought was make the browser title bar flash. Anyone know how?

My coworker wrote a quick mvc chat application so we can chat about work stuff without leaving our desks.

What are some ways to indicate to each other a new message has been posted? My first thought was make the browser title bar flash. Anyone know how?

• javascript
• jquery

• 1 Why not use a native chat application? Not installed? – Marcel Korpel Commented Aug 12, 2010 at 15:34
• @Marcel Korpel, The web is the future! – strager Commented Aug 12, 2010 at 15:42
• 2 How about using the BLINK tag? /ducks – Dan Diplo Commented Aug 12, 2010 at 15:45
• 2 Why re-invent the wheel and not just use IRC? – Andreas Bonini Commented Aug 12, 2010 at 15:46
• possible duplicate of Make Browser Window Blink in Task Bar – nobody Commented Oct 7, 2010 at 23:33

4 Answers 4

It is not possible to make the browser blink in javascript. A possibility is to set the document title to empty an then write it again with through a period of time with setTimeout()

You could play a tone or other audio clip when a new message displays.

The nice thing about an audible cue is that you are able to keep your eyes on your work until you come to a natural break point to answer the message. Visual cues, in my opinion, are more likely to interrupt your work flow.

Obviously you can make the audible cue as pleasant and non-intrusive as your imagination allows.

This nifty function i got reserved should be handy:

It changes the title of the page to alert the user, and returns the function that will stop the interval(i.e. on a window.onmousemove listener).

function Alert(msg [, ti]) { 
// msg = the message, ti= time interval between title changes(default is 1.5s)
    var intervalId, oldTitle = document.title;
    intervalId = setInterval(function(){
        document.title = document.title == msg ? oldTitle : msg;
    }, ti ? ti : 1500);
    return function() {
    if(oldTitle) {
        clearInterval(intervalId);
        document.title = oldTitle;
    oldTitle = intervalId = null;
    }
    };
}

I've written a jQuery plugin for this purpose. See my answer to this question.