JavaScript User Idle Timeout script.

idletimeout.js

// Define some global vars for our idle timer
var idleTime = 0;
var countdown = 10;
var idlemin = 10;
var idlemax = 20;

//
//
// you need to define your own HTML and css styles for the warning message and fade layer.
// the warning message goes in a div with the ID #idlewarn
// the css should style for a fade layer with the id #fade
//
//


// N.B. using jQuery - easily adapted for other *.js library.
$(document).ready(function(){
  
  // every N sec this example goes every 1 sec BUT that's a bit much in practice.
  var idleInterval = setInterval("timerIncrement()", 1000); 

    // Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        // hide warning + countdown
        countdown = 10;
         $('#fade').remove();  // remove the lightbox fade layer
        $('#idlewarn').fadeOut('fast'); // hide our warning message
        idleTime = 0;
    });
    // Also Zero the timer on keypress
    $(this).keypress(function (e) {
        // hide warning + countdown
        countdown = 10;
         $('#fade').remove();  // remove the lightbox fade layer
        $('#idlewarn').fadeOut('fast'); // hide the warning message
        idleTime = 0;
    });

}); // end document.ready block


// The function that gets called every second.
function timerIncrement() {
    idleTime = idleTime + 1; 

    // if user has been idle for the idlemin time do this - show warning message.
    if (idleTime >= idlemin && idleTime < idlemax) { 

      countdown = (idlemax - idleTime) ; //use a countdown to show user how long they have 
      $('#countdown').html(countdown);

      // Show the warning along with a countdown timer
      if ($('#idlewarn').css('display') != 'block') {

        // Fade in the Popup and add close button
        $('#idlewarn').fadeIn() 

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').fadeIn(); // Fade in the fade layer 
        return false;
      }

    } else if (idleTime >= idlemax) {
      // User has been idle too long - they've exceeded idlemax time.
      // so take another action
      // in this example we simply send them back to the homepage with a logout flag
      window.location.href= '/?logout';
    }

}//end timer increment

idletimer.css

/*
* Barebones example css for the idle timer.
**/

#fade { 
  /*--Transparent background layer--*/
  display: none; /*--hidden by default--*/
  background: rgba(0,0,0,0.6);
  position: fixed; left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 9999;
}


#idlewarn {
  display: none; /*--hidden by default--*/
  background: rgb(0,97,127);
  padding: 20px;
  border: 1px solid rgb(3,52,102);
  float: left;
  position: fixed;
  top: 50%; left: 50%;
  z-index: 99999;
  /*--CSS3 Box Shadows--*/
  -webkit-box-shadow: 0 5px 20px 5px #000000;
  -moz-box-shadow: 0 5px 20px 5px #000000;
  box-shadow: 0 5px 20px 5px #000000;
  /*--CSS3 Rounded Corners--*/
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

it is very helpful