Lightweight jQuery Plugin To For User Idle Detection - IdleDetection

Lightweight jQuery Plugin To For User Idle Detection - IdleDetection
File Size: 7.32 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another user idle detection plugin for jQuery that tracks users activity on the webpage by listening for the mouse movement, window focus and other custom events, and then fires associated callback functions when the user reaches the idle limit specified in the JavaScript.

How to use it:

1. Include the minified version of the jQuery IdleDetection plugin after you've included jQuery JavaScript library on the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.idledetection.js"></script>

2. Set the idle time limit in milliseconds.

$(document).idleDetection({
  idleCheckPeriod: 1000
});

3. Specify the events you'd like to keep track of.

$(document).idleDetection({
  idleCheckPeriod: 1000,
  trackEvents: 'mousemove mousedown keydown keypress keyup submit change mouseenter scroll resize touchstart'
});

4. Execute callback functions when the user become idle and is active again.

$(document).idleDetection({
  idleCheckPeriod: 1000,
  onIdle: function() {
    alert('User has become Idle!')
  },

  onActive: function() {
    alert('User is active again.')
  },
});

5. Execute callback functions when the browser window/tab gets or loses focus.

$(document).idleDetection({
  idleCheckPeriod: 1000,
  onHide: function() {
    alert('Window/tab is not active anymore.')
  },
  onShow: function() {
    alert('Window is active again.)')
  },
});

6. Execute a callback function when the idle status has changed.

$(document).idleDetection({
  idleCheckPeriod: 1000,
  onStatusChange: function(isIdle) {
    alert('User or window event has changed. The idle status is: ' + isIdle);
  },
});

7. If you'd like to track the idle status only first time:

$(document).idleDetection({
  idleCheckPeriod: 1000,
  keepTracking: false
});

This awesome jQuery plugin is developed by bogdanteodoru. For more Advanced Usages, please check the demo page or visit the official website.