Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Possible to flash a Browser window using Javascript?

Like many programs flash their window on the taskbar / dock to alert the user to switch to the program,

Is it possible to flash the Browser window using Javascript? (FireFox-only scripts are also welcome)

This is useful for web-based Chat / Forum / Community-based software where there is lots of real-time activity.

like image 626
Robin Rodricks Avatar asked Jan 28 '09 06:01

Robin Rodricks


2 Answers

@Hexagon Theory: Why would you ever rewrite the whole head element just to change the value of one element in the head? Your solution is horribly inefficient on multiple levels.

<html>
<head>
<link rel="icon" href="on.png" type="image/png" id="changeMe" />
<script type="text/javascript" src="flash.js"></script>
</head>
<body>
</body>
</html>

flash.js:

function Flasher(speed) {
  var elem = document.getElementById('changeMe');

  this.timer = setTimeout(function() {
    elem.href = elem.href ==  'on.png' ? 'off.png' : 'on.png';
  }, speed);

  this.stop = function() { clearTimeout(this.timer); }
}

/* sample usage
 *
 * var flasher = new Flasher(1000);
 * flasher.stop();
 */

It didn't really have to be a class but it helped keep the global namespace clean. That's untested but if simply changing the href doesn't work for some reason, clone the link node, change the href and replace the old link with the cloned one.

like image 118
fearphage Avatar answered Sep 21 '22 16:09

fearphage


At this point, it seems only causing an alert dialog to pop up does the trick... this seems a bit too intrusive, I feel, particularly given the use you're trying to put it to. Instead of causing it to flash, though, you could modify document.title to grab the user's attention, either by prepending some signal (perhaps the string "NEW!") to the site's name, and then using an interval to constantly change it to "", which would then give a nice little "flashing" illusion.

Bare-bones example:

<html>
<head>
<title>Chat System</title>
<script>
var timer, old_t = document.title, blink_amount = 5, cur_b = 0;
function notify()
 {
cur_b = 0;
timer = setInterval(function()
 {
if (cur_b < blink_amount * 2)
 {
cur_b++;
document.title = (document.title.indexOf('NEW! ') != -1) ? old_t : 'NEW! ' + old_t;
 }
else
 {
clearInterval(timer);
 }
 }, 600);
 }

notify();

// From here, it's just a matter of calling the
// notify() function whenever you detect a new message.
</script>
</head>
<body>
</body>
</html>
like image 45
Hexagon Theory Avatar answered Sep 19 '22 16:09

Hexagon Theory