Executing Callbacks After An Idle Timeout with jQuery Idle - Download Executing Callbacks After An Idle Timeout with jQuery - Idle

Download Executing Callbacks After An Idle Timeout with jQuery – Idle

By Posted on

This time I will share jQuery Plugin and tutorial about Executing Callbacks After An Idle Timeout with jQuery – Idle, hope it will help you in programming stack.

Executing Callbacks After An Idle Timeout with jQuery Idle - Download Executing Callbacks After An Idle Timeout with jQuery - Idle
File Size: 10.7 KB
Views Total: 6071
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Idle.js is a super light-weight jQuery plugin that tracks how long users interact with a web page and execute callback functions after a given idle timeout.

By default, the plugin listens for mousemove, keydown, mousedown and touchstart events to keep track of user activities.

The zip also includes a vanilla JavaScript version which allows you to implement the idle resetter on the web page without jQuery.

Installation:

view source
1 # NPM
2 $ npm install jquery.idle --save

Basic usage:

1. Make sure to inlcude the jQuery idle.js script after jQuery JavaScript library.

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <script src="jquery.idle.js"></script>

2. Execute callbacks after 60 seconds idle.

view source
01 $(document).idle({
02  
03   // on idle
04   onIdle: function(){
05     // do something
06   },
07  
08   // after user back from idleness
09   onActive: function(){
10     // do something
11   },
12  
13   // check window visibility
14   onHide: function(){
15     // do something
16   },
17  
18   onShow: function(){
19     // do something
20   }
21    
22 });

3. Change the default idle timeout.

view source
1 $(document).idle({
2  
3   idle: 60000, //in ms
4    
5 });

4. Add custom events that will trigger the idle resetter.

view source
1 $(document).idle({
2  
3   events: 'mousemove keydown mousedown touchstart',
4    
5 });

5. All default options and callbacks.

view source
01 $(document).idle({
02  
03   //idle time in ms
04   idle: 60000,
05  
06   //events that will trigger the idle resetter
07   events: 'mousemove keydown mousedown touchstart',
08  
09   // executed after idle time
10   onIdle: function () {},
11  
12   // executed after back from idleness
13   onActive: function () {},
14  
15   // executed when window is hidden
16   onHide: function () {},
17  
18   // executed when window is visible
19   onShow: function () {},
20  
21   // set to false if you want to track only the first time
22   keepTracking: true,
23   startAtIdle: false,
24   recurIdleCall: false
25  
26 });

Changelog:

2018-10-24

  • v1.3.0

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

source : jquery.net

Related posts: