Main menu
WalkswithMejQueryIdle timeout plugin using jQuery

Idle timeout plugin using jQuery

Idle timeout plugin using jQuery is very power full and easy for integrating with your application. Now these days its very usual for finding the Idle timeout and logout from your application or expire the page etc..

The application that handles profile or shopping cart its necessary to implement Idle timeout plugin. The user inactive for a limited time we have to identify the user was not in the system or not in the current tab. So there is no use of keeping their info on session or cookie etc.

How do you feel about this Idle timeout plugin working method ? . Yes its quite simple and worth for your application, Its checking the mouse movement on the browser and checking for inactive time interval. Ok now you get the basic idea about Idle timeout plugin. Then next is how we can achieve this. with one jQuery file named as idle_timer.js  and basic javascripts.

First you have to create an index.html file and have the following scripts on the head portion of your html file.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="idle_timer.js" type="text/javascript"></script>

The next is the script initialization section you can set the time is Min or MicroSeconds the following codes should be attached inside  head of your html file.


<script type="text/javascript">
jQuery(document).ready(function(e) {
var tt_exp = "1"; //set the exp time in min
tt_exp     = (parseInt(tt_exp) * 60000); //set the time in microsecond
jQuery(document).bind("idle.idleTimer", function(){
jQuery("#divId").html("Time Out"); //here you can attach any function for timeout action even ajax call too.
});
jQuery(document).bind("active.idleTimer", function(){
//alert("You are alive ")
jQuery("#divId").html("You are alive"); //This means the session is alive
});
jQuery.idleTimer(tt_exp);
});
</script>

And your index.html file body part should have something like follows.


<div style="width:100%;height:150px;background:#CCC;" >
<h1><div id="divId">Walkswithme.net</div></h1>
</div>

This can be used for checking the inactive time or Idle timeout using jQuery. Its easy to integrate with your current application and simple to initiate the calls.

demo_image                       Thanks for reading 🙂 🙂 🙂

Download1294 downloads

5 thoughts on “Idle timeout plugin using jQuery

  1. Dear Jobin,

    If we open the same url in new tab or new window if I am working on one tab other tab will show the log out message how do you solve this issue

    1. Hello Imran,

      I got your point, Idle timeout plugin using jQuery is just identify the timeout its not integrated with multiple tab or window options. But you can just achieve that in a tricky way like below.

      jQuery(window).blur(function(){
      //your code here to stop the finding idle time check
      });
      jQuery(window).focus(function(){
      //your code here to start idle time check
      });
      For the correct integration you can check this http://www.w3.org/TR/page-visibility/

Leave a Reply

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

 
FacebookTwitterGoogle+RSS