How to find the user is idle or active on web page or its element.
We know that user is active on our web page or any element of the web page when he performs following actions
- Mouse Moves
- Key board button presses (presse down or up)
- Mouse Wheel or Mouse Scrolls
- Mouse Down ( click)
When the user doesn’t do any of above action on web page ,he is idle or in active.
Here we group above events as user active events and other one event that is user idle Event. let consider user is idle for a certain time if he doesn’t any user events ,10 seconds .
The logic is here very simple we bind a timer event that is called idle event ,it will called 10seconds.
If we user performs any above user active events ,we post pone the idle event for next 10seconds.
If he doesn’t do any thing for 10seconds the idle event automatically called by timer event.
We test on following Element with jQuery.
var timer;// a timer event var idleTime=3000;//ms //this function post pones calling userIdle function for next 10 Seconds function userActive(){ clearTimeout(timer);//resent the timer timer=setTimeout(userIdle,idleTime);//again post pone user Idle function $('#ObserverElement').html('Glad to see you again !!') .trigger('active');// trigger a custome event that is user active } function userIdle(){ $('#ObserverElement').html('Oops!! user in active !!') .trigger('idle');// trigger a custom event that is user is idle. } $().ready(function(){ $('#ObserverElement') .bind('mousemove',userActive) .bind('keydown',userActive) .bind('DOMMouseScroll',userActive) .bind('mousewheel',userActive) .bind('mousedown',userActive) .bind('active',function(){ //if user comes active again we change back ground color $(this).css('background-color','#FFFF00'); }) .bind('idle',function(){//if user go in active or idel we change back ground color $(this).css('background-color','#CCFF00'); }); }); |