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 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.

By Arjun

I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.

3 replies on “How to Detect user is active or idle on web page Using JQuery ?”

Leave a Reply

Your email address will not be published. Required fields are marked *