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.