jQuery change class everywhere on the page in 15 secs of user's inactivity

Question

I have a html page that has several small windows on the page (the number of windows is not defined). Each window has .ticking class. .ticking class used for jQuery to display the server time + on the user's browser. Some windows look the same but to not have .ticking classes. Nothing happens in such windows.

I want to:

1) show popup in 15 secs of inactivity and remove ticking classes from everywhere on the page

2) return everything back when clicked on the page, i.e. return .ticking class to those that had it.

Any ideas how to do that?

As far as I understand, I should rename .ticking class to .ticking-sleep one and rename .ticking-sleep to .ticking when user closed the popup. But, I still don't know how to realize that and what events to use.

Answer 1

I assume user activity encompasses mouse movement mainly. You can use setTimeout on a function that renames the classes etc. You can use a mousemove handler to reset that timeout to 15 seconds all the time. Once the user stops moving the timed out function call will execute and change the classes, show your popup etc.

Untested, but something like this:

var inactiveTimeout = setTimeout(handleInactiveUser, 15000);

$(document).mousemove(function(){
    //clear the timeout and reset
    clearTimeout(inactiveTimeout);
    inactiveTimeout = setTimeout(handleInactiveUser, 15000);
});

function handleInactiveUser(){
    // change the classes
    // show the popup
}

UPDATE: DEMO Illustrates the principle nicely I think.