CSS & Javascript "timer" will not work in Opera
Steve
was the appropriate one.
I created a CSS based "dialog box" as an alternative to a pop-up. In
the example below, a link is clicked, a gray transparent div covers
the whole screen, above that div a "dialog box" appears. The "dialog
box" has a javascript countdown of the time, counting in the box and
updating to the status bar.
This works in IE 6, IE7, & the latest Firefox for Windows. It doesn't
work with Opera 9.26 on WindowsXP. The timer in the status bar
counts, but not the timer in the "dialog box" unless the browser is
minimized and then brought back up. Even in that case, it updates
only once.
Below is a JSP that I saved to an HTML. I didn't author all of the
JSP, it is a legacy site. So that is why the code looks the way it
does. However, I did strip as much code not essential to this issue
out.
I would appreciate it if someone could paste the code below into a
text editor and tell my it does not work in Opera on Windows. I'm
trying to do the right thing by supporting all of the browsers. Opera
is the last one where it will not work and I would like to get it
working.
Thanks in advance for the help
=======================================================
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS" TYPE="">
body
{
height: 100%;
margin: 0;
padding: 0;
width: 100%;
background-color:#d3d3d3;
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
.overlayScreen
{
display:none;
position:absolute;
height:100%; width:100%;
top: 0; right: 0; bottom: 0; left: 0;
background:black;
color:white;
z-index:1001;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
.popin
{
display:none;
height:50%;
width:50%;
position:absolute;
top:25%;
left:25%;
background:white;
color:black;
padding:1%;
border: 16px solid black;
z-index:1002;
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
</STYLE>
<TITLE>Stripped Down</TITLE>
</HEAD>
<FORM name=GOOD><input name=done type=hidden></form>
<FORM name=TimerForm>
<INPUT type=hidden name=sysTimer value=0>
<INPUT type=hidden name=timeSetter value=''>
</FORM>
<script type = "text/javascript">
//-----------------------------------------------------------------------------
// Show the Session Ending Warning Box
function showPopInBoxSessionEndingWarning()
{
// Get gray background and popin divs
var matting = document.getElementById("divGrayOutAndLock");
var pop_in =
document.getElementById("divPopInBoxSessionWarning");
// Remove scrollbars
// This obviates the need to make a moving Pop-In window to keep
it in
// the user's face. For IE it is necessary to explicitly scroll
the page
// to the top before removing the scroll bar.
scroll(0,0);
document.body.style.overflow = "hidden";
// Again to get around IE, make the gray background div the
height of the
// HTML doc
if (document.body.scrollHeight > window.screen.height)
{
matting.style.height = document.body.scrollHeight;
}
// "Gray out" the user's screen and display the Pop-In window
matting.style.display = "block";
pop_in.style.display = "block";
}// end function showPopInBoxSessionEndingWarning()
//----------------------------------------------------------------------------
// Make the Pop-In Windows invisible again
function hidePopInBoxSessionEndingWarning()
{
// Remove Gray-Out Layer & Pop-In Window
document.getElementById('divGrayOutAndLock').style.display='none';
document.getElementById('divPopInBoxSessionWarning').style.display='none';
// Put the scrollbars back
document.body.style.overflow = "auto";
// Correct for a bug in IE 6 where SELECT menus will not be
covered up
// by DIV elements - show the SELECT menus again
if( isMSIELessThan7() )
{
showhideSELECTmenus();
}
}// end function hidePopInBoxSessionEndingWarning()
//------------------------------------------------------------------------------
// Update the countdown display of the Session Clock in the Session
Ending
// Warning Window
function showSessionClock()
{
var sessionClock = document.getElementById("session_clock");
try
{
// Get the latest time. This hidden form element is updated
by
// legacy javascript in the footer.jspg file
sessionClock.innerHTML = document.TimerForm.sysTimer.value;
if ( document.TimerForm.sysTimer.value == "00:09" )
{
return false;
}
// Set this function to repeat so that the Session Clock
continualy
// counts down
setTimeout("showSessionClock()",100);
}
catch (ex)
{
// If something is wrong, hide the Session Ending Warning
Window
hidePopInBoxSessionEndingWarning();
}
}// end showSessionClock()
</script>
<!-- Overlay To Gray Out & Lock The Screen, sits "under" a Pop-In
Window !-->
<div id = "divGrayOutAndLock" class = "overlayScreen"></div>
<!-- Pop-In Box: Session Ending Warning !-->
<div id = "divPopInBoxSessionWarning" class = "popin">
<p style = "text-align:center;font-size:150% !important;font-
weight:bold;color:red;">
Warning! <u>Automatic Logout</u> in
<span id = "session_clock" style = "position:center;padding-
right:4px;">
</span>
(min:sec)
<p>
<p style = "text-align:center;font-size:150% !important;font-
weight:bold;">
Do you want to extend your session time?
</p>
<p style = "text-align:center;">
<input type = "button" value = "Extend" onClick =
"extendSession(false);">
<input type = "button" value = "Close" onClick =
"hidePopInBoxSessionEndingWarning();">
<p style = "text-align:center;">
<p style = "border-style:double;padding:5px;">
<font size = "2px">
<strong><u>Notice:</u></strong>To protect the sensitive data this
system
handles, your browser connection will be automatically terminated
if you
remain on the same page longer than 20 minutes without an action
that
changes or refreshes the screen by the server. Data modifications
will be
lost. Elapsed time on a page will be indicated by the timer.
</font>
</p>
<script>
// Show & Update The Session Clock In The Pop-In Box
showSessionClock();
</script>
</div>
<SCRIPT>
/*
** Timeout Advantage EDC
** startpoint sets how long will wait without activity before
** timing the user out
*/
var startpoint = new
Date();startpoint.setMinutes(startpoint.getMinutes()+ 20);
var warned = false;
function showtime()
{
var now = new Date();
var tDiff = startpoint.getTime() - now.getTime();
if(document.TimerForm.timeSetter.value!='')
{
startpoint = new
Date();startpoint.setMinutes(startpoint.getMinutes()+ 20);
var tDiff = startpoint.getTime() - now.getTime();
document.TimerForm.timeSetter.value= '';
warned = false;
}
now.setTime(tDiff);
document.TimerForm.sysTimer.value = ''+ (now.getMinutes()<10 ? '0'
+
now.getMinutes():now.getMinutes()) + ':'+ (now.getSeconds()<10 ? '0'
+
now.getSeconds():now.getSeconds());
if (now.getMinutes()==0 && now.getSeconds()==50)
{
showPopInBoxSessionEndingWarning();
}
if (now.getMinutes()==0 && now.getSeconds()==0)
{
hidePopInBoxSessionEndingWarning()
}
if (now.getMinutes()==2 && !warned )
{
showPopInBoxSessionEndingWarning();
}
window.status = "Remaining Session Time : " +
document.TimerForm.sysTimer.value;
timerID = setTimeout('showtime()',1000)
}
showtime();
</SCRIPT>
<a href =
"javascript:showPopInBoxSessionEndingWarning();">showPopInBoxSessionEndingWarning();</
a>
</BODY>
</HTML>
Steve
> My apologies in advance for cross posting. I wasn't sure which group
> was the appropriate one.
>
> I created a CSS based "dialog box" as an alternative to a pop-up. In
> the example below, a link is clicked, a gray transparent div covers
> the whole screen, above that div a "dialog box" appears. The "dialog
> box" has a javascript countdown of the time, counting in the box and
> updating to the status bar.
>
> This works in IE 6, IE7, & the latest Firefox for Windows. It doesn't
> work with Opera 9.26 on WindowsXP. The timer in the status bar
> counts, but not the timer in the "dialog box" unless the browser is
> minimized and then brought back up. Even in that case, it updates
> only once.
>
> Below is a JSP that I saved to an HTML. I didn't author all of the
> JSP, it is a legacy site. So that is why the code looks the way it
> does. However, I did strip as much code not essential to this issue
> out.
>
> I would appreciate it if someone could paste the code below into a
> text editor and tell my it does not work in Opera on Windows. I'm
> trying to do the right thing by supporting all of the browsers. Opera
> is the last one where it will not work and I would like to get it
> working.
>
> Thanks in advance for the help
I found my own answer and being a good citizen I thought I would post
my answer for people searching usenet archives. In a nutshell, it is
a bug in Opera, fixed in the current beta of the next release:
http://my.opera.com/community/forums/topic.dml?id=232142&t=1210604676&page=1#comment2549392