jQuery binding and idle users on Day 3 of Daily Code!

Having fun in timeout

Sometimes users disappear for a bit. Maybe you would like to welcome back with a greeting or a special animation. Or in this case, you just want to mess with them.

Well, we need to figure out when the user goes idle as well as when the user returns for interaction.

First, the variables:

var idleTimer = null, idleState = false, idleStatePrev = true, idleWait = 10000;

These variables get set outside of all functions so they can be accessed globally.

idleTimer is our place holder for the timer function. It is initially set to null so we can define the timer when needed.

idleState is our reference to whether the user is idle or not. Iitially set to false so the user does not start out idle.

idleStatePrev is our reference to the previous idle state. Used to determine non-idle state.

idleWait is our idle timeout duration in milliseconds. 10000 = 10 seconds.

Next, the binding:

$('*').on('mousemove keydown scroll', function () { // this is where we put the magic });

$(‘*’) targets all elements.

.on(…) binds the elements to triggers.

‘mousemove keydown scroll’ defines the specific triggers we are looking for.

function(){ … } is called when a trigger is fired from a bound element.

Finally, the timer:

clearTimeout(idleTimer); if (!idleState && !idleStatePrev) { // Reactivated event $("#timer span").html("You are not idle"); alert("Welcome Back!

You're awesome!"); $('*').css('background-color', '#' + Math.floor(Math.random()*16777215).toString(16) ); idleStatePrev = true; } idleState = false; idleTimer = setTimeout(function () { $("#timer span").html('You are idle'); idleState = true; idleStatePrev = false; }, idleWait);

All of the following code goes inside the binding function declared above.

First, we need to clear out our idle timer variable using clearTimeout(idleTimer);

Next, if (!idleState && !idleStatePrev) { checks to see if both the idleState and idleStatePrev are false which shows that the user has left the idle state.

If both arguments return false, it will preform the following:



$(“#timer span”).html(“You are not idle”); prints out indicator text in the navigation of this page.

alert(“Welcome Back!

You’re awesome!

I hope you like your surprise…”) welcomes the user back with a nice message.

$(‘*’).css(‘background-color’, ‘#’ + Math.floor(Math.random()*16777215).toString(16) ) sets the background-color of all elements to a random hex color (just for fun).



And, we set idleStatePrev = true to reset the idle status.

idleState = false basically resets the idle status.

Then, we define our idleTimer variable with a setTimeout function.

$(“#timer span”).html(“You are idle”); prints out indicator text in the navigation of this page.

idleState = true lets us know that the user is now idle.

idleStatePrev = false helps us determine if the user is still idle (see if condition above).

…}, idleWait) tells the setTimeout function how long to wait as defined in our global variables.

Summing up:

var idleTimer = null, idleState = false, idleStatePrev = true, idleWait = 10000; $('*').on('mousemove keydown scroll', function () { clearTimeout(idleTimer); if (!idleState && !idleStatePrev) { // Reactivated event $("#timer span").html("You are not idle"); alert("Welcome Back!

You're awesome!

I hope you like your surprise..."); $('*').css('background-color', '#' + Math.floor(Math.random()*16777215).toString(16) ); idleStatePrev = true; } idleState = false; idleTimer = setTimeout(function () { $("#timer span").html('You are idle'); idleState = true; idleStatePrev = false; }, idleWait); }); $("body").trigger("mouseover");

Lastly, we need to fire an initial trigger of mousemove on the body to initiate the idle monitoring.

Here is the entire code.

Weird Chrome Bug Note:

There is a weird bug in Google Chrome that will fire mousemove every 1 – 5 seconds ONLY IF you have some specific things running on your machine. Particularly, programs that monitor on a frequent basis (Task Manager, Resource Managers) or music players can shift focus (iTunes).

[bananas]