How to Detect user is active or idle on web page Using JQuery ?

In this post i will show you how to Detect user State(active or idle) on the web page or on the element using JQuery.

if you find in some sites (for example Godaddy.com) if user stay ideal for sometime automatically he/she will get alert, like your idle for this much time on site and your session is going to expire within 5 minutes or something else. We can implement this functionality easily by using JQuery.

Possible events on the webpage.

  • Mouse Moves,Mouse Wheel or Mouse Scrolls,Mouse Down or Mouse up,Click
  • Key board button presses (presse down or up)

Based on above events we can analyze the user state , if a user doesn’t do any above action he/she is idle or in active.

Here is the Jquery Events list which i am using in the tutorial.

  • mousemove
  • click
  • mouseup
  • mousedown
  • keydown
  • keypress
  • keyup
  • submit
  • change
  • mouseenter
  • scroll
  • resize
  • dblclick

Here is the sample script

The logic is here very simple we bind events(listed above) to all elements, on DOM Ready mousemove events triggering(on page load).

If we user performs any above events ,we post pone the idle event for next 2seconds.

If he doesn’t do any thing for 2seconds the anonymous function automatically called by timer event.Here the example we are changing background color to black. if user do any of the above events background color changes to white .

That’s all for today, I hope you liked this tutorial please feel free to comment your feedback and suggestion.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

Arjun
I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.
DMCA.com Protection Status