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.

                       Thanks for reading 🙂 🙂 🙂