Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make browser window blink in task Bar

How do I make a user's browser blink/flash/highlight in the task bar using JavaScript? For example, if I make an AJAX request every 10 seconds to see if the user has any new messages on the server, I want the user to know it right away, even if he is using another application at the time.

Edit: These users do want to be distracted when a new message arrives.

like image 656
erik Avatar asked Aug 31 '08 21:08

erik


2 Answers

this won't make the taskbar button flash in changing colours, but the title will blink on and off until they move the mouse. This should work cross platform, and even if they just have it in a different tab.

newExcitingAlerts = (function () {     var oldTitle = document.title;     var msg = "New!";     var timeoutId;     var blink = function() { document.title = document.title == msg ? ' ' : msg; };     var clear = function() {         clearInterval(timeoutId);         document.title = oldTitle;         window.onmousemove = null;         timeoutId = null;     };     return function () {         if (!timeoutId) {             timeoutId = setInterval(blink, 1000);             window.onmousemove = clear;         }     }; }()); 

Update: You may want to look at using HTML5 notifications.

like image 133
nickf Avatar answered Sep 21 '22 03:09

nickf


I've made a jQuery plugin for the purpose of blinking notification messages in the browser title bar. You can specify different options like blinking interval, duration, if the blinking should stop when the window/tab gets focused, etc. The plugin works in Firefox, Chrome, Safari, IE6, IE7 and IE8.

Here is an example on how to use it:

$.titleAlert("New mail!", {     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 work around when doing title blinking if you want to fully support all major browsers).

like image 23
heyman Avatar answered Sep 18 '22 03:09

heyman