Displaying Notification in Title Bar

Ever wondered how Google Talk and Facebook Messages show notification in Title bar ? I did. Read on to know how you can also create that.

The javaScript that holds and helps us to manipulate ‘title’ bar is: document.title

To get what is currently in the ‘title’: getTitle = document.title;

To set something as ‘title’: document.title = setTitle;

To make it flashing in the ‘title’ bar and make your users annoyed by it until they produce an ‘event’:

This wont work in Codepen or JSFiddle as these both environments are running in iFrame. Try in your local machine.

Remember, the setInterval‘s delay minus the setTimeout‘s delay is the actual time the message will stay in your title. Also, the reason I added setTimeout in click ‘event’ is because the other setTimeout inside the setInterval might would have also kicked in when the event fired and the user might just be stuck with the notification and that would be annoying. That is the reason it has delay greater than the delay in setInterval.

If you think there is better way, please let me know! I am always hungry for knowledge.

Be the first to comment

Leave a Reply

Your email address will not be published.