I have three jquery scripts which work together simultaneously.
My first bit of jquery code runs after a 30 second time delay. This prompts the user to say they will be logged out in 30 seconds due to inactivity.
<script>
$(document).ready(
function() {
setInterval(function() {
var randomnumber = '<span id="hideMsg"></span>';
$('#warning_show').html(
'<div id="message_box2"><h23>Warning!</h23><p>Your account has been Inactive for some time. You will be logged out in ' + randomnumber + ' seconds. <span id="stay_loggedin"><a href="">Click Here</a></span> to stay Logged In.</p></div>'
);
}, 30000);
});
</script>
The second piece of code counts down 30 seconds to 0.
<script>
$(document).ready(
function() {
setInterval(function() {
var sec = 30
var timer = setInterval(function() {
$('#hideMsg').text(sec--);
if (sec == -1) {
$('#hideMsg').fadeOut('fast');
clearInterval(timer);
}
}, 1000);
}, 29000);
});
</script>
the third and final code redirects the user to my page 'timeout.php' which then kills the logged in session of the user and then redirects them to the login page.
<script>
var logoutTimer = window.setTimeout(function() {
window.location.href = 'include/timeout.php';
}, 60000);
$('#stay_loggedin').click(function() {
window.clearTimeout(logoutTimer);
});
</script>
My question is this: how can I tidy up my code if possible to get this to work as one function and I want this code to only run when their is inactivity of 30 seconds detected on the page. I.e. no mouse movement, no clicking otherwise if their is do not run the code.
At the moment the code will run every 30 seconds despite whether or not a user clicks on divs etc. I only want it to run if their is no mouse movement or clicking on the page for 30 seconds. I hope someone can help as I am really new to Jquery. Thank you in advance.
