homepage Welcome to WebmasterWorld Guest from 54.167.41.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript Autorefresh timer on inactivity with warning box to cancel
Can't get the browser to recognize mousemovement or key presses
erin0201




msg:4332134
 4:01 pm on Jun 28, 2011 (gmt 0)

I am fairly new to working with javascript and am working on an intranet site for my company. I have a page that loads an external employee information site inside of an iframe. I have modified the code on this page to autorefresh the page after a countdown from a certain period of inactivity if no cancel button is pressed when the warning is displayed.
Original code example:
[beyondfusion.com ]

However, while the countdown works and the cancel button works, the browser is ignoring my requests such as onmousemove onkeydown onmouseup etc to reset the timer as the code is showing.

Any ideas or suggestions?
Thanks!

Below is my code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="adp.aspx.vb" Inherits="adp2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/Styles/site.css" rel="stylesheet" type="text/css" />
<script language="javaScript" type="text/javascript">
<!--

//5 minutes = 300000 (1000 ms * 60 seconds * 5 minutes) 1 second = 1000miliseconds
var autoCloseTimer;
var timeoutObject;
var timePeriod = 10000; // 10 seconds
var warnPeriod = 5000; // 5 seconds

function promptForClose() {
autoCloseDiv.style.display = 'block';
autoCloseTimer = setTimeout("definitelyClose()", warnPeriod);
}


function autoClose() {
autoCloseDiv.style.display = 'block'; //shows message on page
autoCloseTimer = setTimeout("definitelyClose()", timePeriod); //starts countdown to closure
}

function cancelClose() {
clearTimeout(autoCloseTimer); //stops auto-close timer
autoCloseDiv.style.display = 'none'; //hides message
}

function resetTimeout() {
clearTimeout(timeoutObject); //stops timer
timeoutObject = setTimeout("promptForClose()", timePeriod); //restarts timer from 0
}


function definitelyClose() {

parent.Iframe0.location.href = "https://URLHERE.com/"
}
-->
</script>

</head>
<body onmousedown="resetTimeout();" onmouseup="resetTimeout();" onmousemove="resetTimeout();" onkeydown="resetTimeout();" onload="timeoutObject=setTimeout('promptForClose()',timePeriod);">
<form id="form1" runat="server">
<div class="page">
<div class="header" style="left: 0px; top: 0px">
<h1>

</h1>
</div>
<div class="clear hideSkiplink">
<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode NavigateUrl="~/Default.aspx" Text="Home" Value="Home">
</asp:TreeNode>
</Nodes>
</asp:TreeView>

<br />

</div>

<div class="leftcolNon">
<div id='autoCloseDiv' style="display:none">
<center>
<p>
<strong>Inactivity warning!</strong><br />
This page will reset in 5 seconds unless you hit 'Cancel.'</p>
<input type='button' value='Reset' onclick='definitelyClose();' />
<input type='button' value='Cancel' onclick='cancelClose();' />
</center>

</div>

</div>

<div class="mainColNon">

<div class="iframeAdpSite">
<iframe id="Iframe0" frameborder="0" name="Iframe0" scrolling="auto" src="https://adp.eease.com/" style="width: 764px; height: 1000px">Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div>

</div>
<div class="rightcolNon">

</div>
<!-- </div> -->
<div class="clear">
</div>
<div class="footer">
</div>
</div>

</form>
</body>
</html>

 

rocknbil




msg:4332602
 4:38 pm on Jun 29, 2011 (gmt 0)

Welcome aboard erin0201, remove the onload events from body (just use <body> ) and add the following immediately after var warnPeriod:


window.onload=function() {
document.body.onmousemove=function() { resetTimeout(); }
timeoutObject=setTimeout('promptForClose()',timePeriod);
};


You'll also need to change these three lines:
document.getElementById('autoCloseDiv').style.display = 'block'; (x 2)
document.getElementById('autoCloseDiv').style.display = 'none';

Just tested, appears to do it . . . Also three other tidbits: you don't need the comment tags around JS and don't need the script language attribute. Since you have an ID on the iframe, you can do

document.getElementById('Iframe0').src = "https://yoursite.com/"

Note that the onmousemove event won't fire when over the iFrame though (since it's no longer over the current document body,) you'll probably have to add a second handler for that.

erin0201




msg:4332999
 11:18 am on Jun 30, 2011 (gmt 0)

Hey Bill,

Thanks for your suggestions! I did finally figure out that the clicks and key presses in the iframe wouldn't be noticed by my page and that unfortunately since the site I have loaded in the iframe is on an external site I can't handle the mouse or keyboard movements in it by editing that page.

I experimented with layering a transparent div container over everything that I found suggested in some forums so that I can handle mouse movements that go over that frame, but I couldn't get that to work. I have everything working in IE 8 and Firefox now. Even if I can't control what's in the iframe, I can at least close the window for our kiosks after a certain amount of inactivity and if the person doesn't cancel the timer when the warning pops up.

Here's my updated code in case it helps anyone. And thanks again for the suggestions!
-------------

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="adp.aspx.vb" Inherits="adp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<%--<meta http-equiv="refresh" content="5; url=index.html" />--%>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<title></title>
<link href="~/Styles/site.css" rel="stylesheet" type="text/css" />
<script type="text/VB" runat="server">

Public Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
' Stop Caching in IE
Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache)

'Stop Caching in Firefox
Response.Cache.SetNoStore()
End Sub

</script>
<script type="text/javascript">
history.forward();

</script>

<script language="javaScript" type="text/javascript">

//5 minutes = 300000 (1000 ms * 60 seconds * 5 minutes) 1 second = 1000miliseconds
var autoCloseTimer;
var timeoutObject;
var timePeriod = 10000; // 10 seconds
var warnPeriod = 5000; // 5 seconds

onmouseover = resetTimeout();

function promptForClose() {

document.getElementById("autoCloseDiv").style.display = 'block';
autoCloseTimer = setTimeout("definitelyClose()", warnPeriod);
}


function autoClose() {
document.getElementById("autoCloseDiv").style.display = 'block'; //shows message on page
autoCloseTimer = setTimeout("definitelyClose()", timePeriod); //starts countdown to closure
}

function cancelClose() {
clearTimeout(autoCloseTimer); //stops auto-close timer
document.getElementById("autoCloseDiv").style.display = 'none'; //hides message
}

function resetTimeout() {
clearTimeout(timeoutObject); //stops timer
timeoutObject = setTimeout("promptForClose()", timePeriod); //restarts timer from 0
}


function definitelyClose() {

parent.Iframe0.location.href = "https://URLHERE/"
window.close()
self.close()
}

</script>

</head>
<body onmousedown="resetTimeout();" onmouseup="resetTimeout();" onmousemove="resetTimeout();" onkeydown="resetTimeout();" onload="timeoutObject=setTimeout(promptForClose, timePeriod);">
<form id="form1" runat="server">

<div class="page">
<div class="pageCover">
<div class="header">
<h1>

</h1>
</div>

<div class="clear hideSkiplink">
<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode NavigateUrl="~/Default.aspx" Text="Home" Value="Home">
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<%--<a href="javascript:location.reload(true)">Refresh this page</a>--%>
<br />

</div>

<div class="leftcolNon">
<div id='autoCloseDiv' style="display:none">
<center>
<p>
<strong>Inactivity warning!</strong><br />
This page will reset in <strong>5 seconds</strong> unless you hit <strong>'Cancel.'</strong></p>
<input type='button' value='Reset' onclick='definitelyClose()' />
<input type='button' value='Cancel' onclick='cancelClose()' />
</center>

</div>

</div>

<div class="mainColNon">

<div class="iframeAdpSite">

<iframe id="Iframe0" frameborder="0" name="Iframe0" scrolling="auto" src="https://URLHERE/" style="width: 764px; height: 1000px">Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>

</div>

</div>
<div class="rightcolNon">

</div>
<!-- </div> -->
<div class="clear">
</div>
<div class="footer">
</div>
</div>
</div>

</form>
</body>
</html>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved