Display DIV only if user has been Idle for X amount of time

I would like to display a helpful DIV that basically shows the user how to accomplish something on a particular page, but only if the user has been idle for a period of time, say, 30seconds.

What I mean by "Idle" is:

Not clicking any links Not right clicking anywhere

Exceptions: I would like to exclude the following conditions 开发者_如何学编程from the Is User Idle rule:

User has scrolled up or down/left or right User has pressed mouse button on an empty area on the site/ or on an element which has no source/link for example, an image with no hyperlink. and, Pressing keyboard buttons

Can this be done? Or can we only detect when a particullar event occurs?

Any thoughts/suggestions/resources will be greatly appreciated.

Thank you

fairly basic...

var trigger = 30000
$.(function(){
    setInterval('displayInf()',trigger );

    $('body').bind('click dblclick keypress mousemove scroll', function(){
        clearDisplayInf();
    });
});

function displayInf()
{
    $('body').append('<div>Your notification div</div>');
}

function clearDisplayInf()
{
    trigger = clearInterval(trigger);
    trigger = setInterval('displayInf()', 30000 );
}

that should do the trick - you could add some script to make the div removable and start the timer again once its removed but that just polishing up really..

Event in DOM would bubble from leaf to root, thus add a event listener on document would make sense.

But since we are possibiliy stop bubbling for click event in certain element, register click event on document may not work perfectly, in that case, register mousedown and mouseup event would help:

var timer; // create a timer at first
// restart timer on click
function startIdle() {
    timer = setTimeout(function() { /* show div */ }, time);
}
if (document.addEventListener) {
    document.addEventListener('mouseup', startIdle, false);
}
else {
    document.attachEvent('onmouseup', startIdle);
}
// start the first timer
startIdle();