It took me a little long to get this , which i wanted.
This is made up of simple Jquery and CSS.
I have mixed up few things which i got from internet and after modifications and merging , i got what i want.
Hope This might help you.
working example : http://pragneshkaria.com/miscellaneous/jquery_session_idealtime_timer/
and code is below
<html> <head> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> br { clear: both; } .cntSeparator { font-size: 54px; margin: 10px 7px; color: #000; } .desc { margin: 7px 3px; } .desc div { float: left; font-family: Arial; width: 70px; margin-right: 65px; font-size: 13px; font-weight: bold; color: #000; } #expireDiv { width: 90%; text-align: center; background-color: #63AFD0; padding: 10px; margin: 0; border: 1px solid #024A68; color: #024A68; font-weight: bold; font-size: 125%; box-shadow: -1px -1px 5px 1px #5E8C9E inset; -moz-box-shadow: -1px -1px 5px 1px #5E8C9E inset; -webkit-box-shadow: -1px -1px 5px 1px #5E8C9E inset; display:none; cursor: pointer; } .pk{ color: green; } .pk1{ color: red; } h3{ color: #024A68; } </style> <script type="text/javascript"> var total_session_time = 5; // after this interval of time if user is ideal then clock timer will start in seconds var clock_timer = 5; //seconds var clock_time_start = total_session_time+clock_timer+1; document.write("<h3>Demo of Session Logout Timer Clock for Ideal user, which will reset again on mousemove or keyboard action</h3><p class='pk'>After <span class='pk1'>"+total_session_time+" Seconds </span>, Session Clock will appear , which will remain for <span class='pk1'>"+clock_timer+" Seconds</span> and if user unable to perform any mousemove , keyboard action it will redirected to logout</p>"); var idleTime = 0; $(document).ready(function () { //Increment the idle time counter every minute. var idleInterval = setInterval("timerIncrement()", 1000); // 1 minute //Zero the idle timer on mouse movement. $(this).mousemove(function (e) { idleTime = 0; $('#expireDiv').slideUp(); }); $(this).keypress(function (e) { idleTime = 0; $('#expireDiv').slideUp(); }); });//document ready function timerIncrement() { idleTime = idleTime + 1; console.log(idleTime); if (idleTime > total_session_time) { count= clock_time_start - idleTime; console.log(count); $('#expireDiv').slideDown(); $('#currentSeconds').html(count); if (count <= 0) { window.location = 'logout.php' return; } } } </script> </head> <body> <div> <div id="expireDiv"> Your session is about to expire. You will be logged out in <span id="currentSeconds"></span> seconds. If you want to continue, please move mouse or type something. </div> </div> </body> </html>
You must log in to post a comment.