How to replicate the Mac OS X fade out "screensaver" with jQuery?

You know how on Macs after about 2-3 minutes of no activity it fades out the screen partially — the same on iOS? Well, I want to replicate this on a web page with jQuery.

I know how to make it fade and all, but I don't know how to make it actually work after 2 or 3 minutes of no mouse move开发者_Python百科 or key presses.

I've researched this on Google and I just keep getting "How to display a webpage as a screensaver on Mac OS X" which is not what I want.

Anyone know how to do this?

Thanks.

Handle the keydown and mousemove events, clear the timeout, then set a timeout to fade out in 2 minutes.

Something like this (untested)

// set the last event time to now on page loading
var lastEvent = new Date();

function fadeOut(){
    // your fade out routine
}

// bind appropriate events to everything
$('*').bind('keydown mousemove mousedown',function(){
    // set the lastEvent time to now after any event
    lastEvent = new Date();
})

// run this every second
setInterval(function(){
    // get current time
    var now = new Date();
    // compare to last event (minus 2 mins) and fade out if it was long enough
    if(lastEvent < now - (2 * 60 * 1000))
        fadeOut()
},1000)

Something like this untested code:

function fadeOut(){
    // your fade out routine
}

// initialise the set timeout function to run fade out after 2 seconds
var x = setTimeout(function(){
    fadeOut()
},2000)

// bind appropriate events to everything
$('*').bind('keydown mousemove mousedown',function(){
    // clear the existing timeout and re-set it starting from now
    clearTimeout(x)
    x = setTimeout(function(){
        fadeOut()
    },2000)
})