Idle Timeout

Testing Idle Timeout script

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css">
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="http://www.erichynds.com/examples/jquery-idle-timeout/src/jquery.idletimer.js"></script>
<script src="http://www.erichynds.com/examples/jquery-idle-timeout/src/jquery.idletimeout.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
        <a href="#page2" data-role="button">Page 2</a>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header">
        <a href="#" data-rel="back">Back</a>
        <h1>Page Two</h1>
    </div>
    <div data-role="content">
        <a href="#page1" data-role="button">Page 1</a>
    </div>
</div>

<div id="idleTimeOut" data-role="dialog">
    <div data-role="header">
        <h1 style="white-space: normal;">Your session is about to expire!</h1>
    </div>
    <div data-role="content">
       <p>
           <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>
           You will be logged off in <span id="dialog-countdown" style="font-weight:bold"></span> seconds.
        </p>
        <p>Do you want to continue your session?</p>
        <div class="ui-gird-a">
            <div class="ui-block-a">
                <input id="btnContinue" type="button" value="Continue" name="continue" />
            </div>
            <div class="ui-block-b">
                <input id="btnLogoff" type="button" value="Logoff" name="logoff" />
            </div>
        </div>
    </div>
</div> <!-- End of IdleTimeoutDialog -->

CSS

/* Hide the close button on dialog*/
#idleTimeOut .ui-header a {
    display: none;
}

JavaScript

$('#btnContinue').live('click', function(){
    $('.ui-dialog').dialog('close');
});
$('#btnLogoff').live('click', function(){
    $.idleTimeout.options.onTimeout.call(this);
});
// cache a reference to the countdown element so we don't have to query the DOM for it on each ping.
var $countdown = $("#dialog-countdown");

// start the idle timer plugin
$.idleTimeout('#idleTimeOut',
              '#btnContinue',
              {
                  idleAfter: 15,
                  pollingInterval: 600,
                  keepAliveURL: 'keepalive.php',
                  serverResponseEquals: 'OK',
                  onTimeout: function(){
                      window.location = "timeout.htm";
                  },
                  onIdle: function(){  
                      $.mobile.changePage('#idleTimeOut',{
                          transition: "pop",
                          changeHash: false});
                  },
                  onCountdown: function(counter){
                      $countdown.html(counter); // update the counter
                  }
              });