How to detect inactive tab and fill it with color

Question

How can I fill my website with color if tab is inactive? I would like to give screensaver like effect to my site if user move to another window. Can I do that with jQuery?

Answer 1

Use window.onfocus() and window.onblur() methods - see http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/ for demo

Answer 2

Here is some basic code to get you going:

<script type="text/javascript"> 
document.onmousemove = resetTimer;
window.onload = function() {
    screenTimer = setTimeout(inactive, 2000);
}
function inactive(){
    // screen saver goes here
    document.body.style.backgroundColor = "black";
}
 function resetTimer(e) {
    // undo screen saver here
    document.body.style.backgroundColor = "white";
    // reset timer
    clearTimeout(screenTimer);
    screenTimer = setTimeout(inactive, 2000);
}
</script> 

Using jquery you could probably clean that up a bit, but this should give a simple foundation to build off of.

Basically, we keep calling the "start screensaver" every 2 seconds, but if you move your mouse it cancels the timer and starts it over. Note: setTimeout uses milliseconds so 1000 = 1 second.