A little more than a year ago I wrote a small jQuery plugin at ESN where I work, called jquery-titlealert. It provides functionality for flashing a notification message in the browser title.

Title alert notifications can be useful when you want to notify a user of some kind of web page event (for example an incoming chat message), when the user has another window, or another browser tab, in focus. Especially if your site uses real-time functionality, like contact lists, user chats, etc. Which, BTW, can easily be achieved using Beacon Push, which is a real-time website service we run at ESN.

Get it

Download v0.7 here. The source code is hosted at GitHub.

Last update: 2010-10-07

How to use it

First, include it on the web page (make sure jQuery has been previously included on that page):

<script type="text/javascript" src="jquery.titlealert.js"></script>

Then you will be able to flash a notification message in the browser title by running:

$.titleAlert("New chat message!");

Or with some options:

$.titleAlert("New chat message!", {
    requireBlur:false,
    stopOnFocus:false,
    duration:4000,
    interval:700
});

The plugin provides options for setting different timings and intervals, as well as functionality for stopping the message flashing when browser window gets focused. See below for all details.

API

$.titleAlert(message, options);
message A string the message that should be flashed in the browser title.
options JavaScript object containing options

Options

Here are the available options that can be set in the option object.

name default description
interval 500 The flashing interval in milliseconds.
originalTitleInterval null Time in milliseconds that the original title is diplayed for. If null the time is the same as interval.
duration 0 The total lenght of the flashing before it is automatically stopped. Zero means infinite.
stopOnFocus true If true, the flashing will stop when the window gets focus.
stopOnMouseMove false If true, the flashing will stop when the document recieves a mousemove event (i.e. when the user moves the mouse over the document area, regardless of what window is active).
requireBlur false Experimental. If true, the call will be ignored unless the window is out of focus.

Known issues: Firefox doesn’t recognize tab switching as blur, and there are some minor IE problems as well.

Compatibility

Title Alert works with jQuery 1.3 and 1.4. It’s tested in Firefox, Chrome, Internet Explorer >= 6 and Safari.