Favicon & Title flash
HTML
<script src="https://raw.github.com/paulirish/jquery-idletimer/571d9a960373e281d63337873cec9b39a76b225f/jquery.idle-timer.js"></script>
<a href="http://fiddle.jshell.net/eirc/Pcmx9/show/" target="blank">Open in new tab</a>
<p>
After 2 seconds of inactivity the favicon starts flashing.
</p>
<p>
Tested in:
<table>
<tr>
<th>OS</th>
<th>Browser</th>
<th>Version</th>
<th>Notes</th>
</tr>
<tr>
<td rowspan="3">Ubuntu Linux</td>
<td>Chrome</td>
<td>18.0.1025.142</td>
</tr>
<tr>
<td>Firefox</td>
<td>11.0</td>
</tr>
<tr>
<td>Opera</td>
<td>11.62</td>
</tr>
<tr>
<td rowspan="4">Windows XP</td>
<td>Chrome</td>
<td>18.0.1025.162 m</td>
</tr>
<tr>
<td>Firefox</td>
<td>9.0.1</td>
</tr>
<tr>
<td>Opera</td>
<td>11.62</td>
</tr>
<tr>
<td>Internet Explorer</td>
<td>8</td>
<td class="fail">Does not work</td>
</tr>
</table>
</p>
CSS
table td {
padding: 0 10px;
border: solid 1px black;
}
table td.fail {
background-color: red;
}
JavaScript
/*!
* jQuery Flasher plugin
* Version 0.1 - 24/04/2012
* @author Errikos Koen
*
* Provides an evented API for flashing "stuff". Flashing in this context means something that has two states, an on
* state and an off state. This plugin allows having many of those flashing "stuff" and having them toggle between their
* states with the same events.
*
* The main API consists of:
// Initialize the flasher with a 400 millisecond interval
$.flasher({ interval: 400 });
// Bind some actions on the on and off events
// Events are triggered on $(document) always
$(document).bind('flasher.on', function() {
$('#flash').css('background', 'red');
});
$(document).bind('flasher.off', function() {
$('#flash').css('background', '');
});
// Start the flashing
// flasher.on and off events start comming!
$.flasher('startFlash');
// Stop the flashing
// no more triggering of flasher.on and off events
$.flasher('stopFlash');
*/
(function($) {
var methods = {
init: function(options) {
// Default options
$(document).data('options', {
interval: 1000
});
// Override options from options given to initialization
if (options) {
if (options.interval) {
$(document).data('options').interval = options.interval;
}
}
},
setFlash: function(on) {
on ? methods.flashOn() : methods.flashOff();
},
flashOn: function() {
$(document).trigger('flasher.on');
$(document).data('flasher.on', true);
},
flashOff: function() {
$(document).trigger('flasher.off');
$(document).data('flasher.on', false);
},
flashtoggle: function() {
methods.setFlash(!$(document).data('flasher.on'));
},
startFlash: function() {
$(document).data('flasher.timeout', setInterval(methods.flashtoggle,...