Hi;
I'm working on a demo of using a timer on a web site that is made
visible by making a div visible.
My "PopIn Box" div is empty on the page. Before making it visible I
used javascript to get the content from another hidden div. I'm
doing it this way to make it easier to add in more messages by simply
putting more hidden divs on the page.
My timer function showtime(), at the end, writes the countdown into
the status bar and into the span called "clock" which is inside a
hidden div "content".
This works great in IE 7 and in the latest Firefox. It does not work
for Opera or Safari for windows. These browsers can't seem to reach
the span nested in the div, moving the content around between divs as
I am.
Any ideas why or suggestions for a work around. My sample HTML file
is below the "========" so anyone who wants to take a look can paste
it into a file to play with it.
Thanks much in advance
==========================================
<html>
<head>
<title>Demo: Javascript Timer & Divs </title>
<style type="text/css" type="">
<!-- For IE, we need the width and height of the body set this way
here -->
body
{
height: 100%;
margin: 0;
padding: 0;
width: 100%;
background-color:#d3d3d3;
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
.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>
<script language = "javascript">
// Creat a new Date object called minutes.
var startpoint = new Date();
// Ad 20 minutes to whatever the minutes in the current hour is
// this is the time in the future when the session ends
startpoint.setMinutes(startpoint.getMinutes()+ 20);
//-----------------------------------------------------------------------------
// This function is called whever the page is loaded
// Update the status bar with the time left in the session once per
second AND
// Update the hidden form var once per second with the time left
function showtime()
{
// Make a new date object to be "right now"
var now = new Date();
// Subtract the time when the page loaded ( + 20 min ) - the time
now
// this is the time left int he session
var tDiff = startpoint.getTime() - now.getTime();
//alert("showTime(): " + document.TimerForm.timeSetter.value);
if(document.TimerForm.timeSetter.value != '')
{
startpoint = new Date();
startpoint.setMinutes(startpoint.getMinutes() + 20);
tDiff = startpoint.getTime() - now.getTime();
alert(startpoint.getTime() + " - " + now.getTime() + " = " +
tDiff);
document.TimerForm.timeSetter.value = '';
}
// Set "now" to be the time left in the session
now.setTime(tDiff);
// Put the time left in the session into the hidden form field.
// Format it to be "minutes:seconds". Use the ? short hand
conditional
// to insert a zerio in front of minuets or seconds readings that
are less
// than two digits
document.TimerForm.sysTimer.value = '' +
(now.getMinutes()<10 ? '0' + now.getMinutes():now.getMinutes()) +
':'+
(now.getSeconds()<10 ? '0' +
now.getSeconds():now.getSeconds());
var statusString = "Remaining Session Time : " +
document.TimerForm.sysTimer.value;
statusbar = statusString;
showtimeInClock();
setTimeout('showtime()',1000);
}
//------------------------------------------------------------------------------
// Output time to the span in the div
function showtimeInClock()
{
var divClock = document.getElementById("clock");
divClock.innerHTML = document.TimerForm.sysTimer.value;
}
//-----------------------------------------------------------------------------
function showPopIn()
{
var pop_in = document.getElementById("divPopIn");
var content = document.getElementById("content");
pop_in.innerHTML = content.innerHTML;
pop_in.style.display = "block";
}
//----------------------------------------------------------------------------
function stopPopIn()
{
var pop_in = document.getElementById("divPopIn");
pop_in.style.display = "none";
}
//-----------------------------------------------------------------------------
</script>
</head>
<body>
<p align = "center">
Javascript Timer
</p>
<form name = "TimerForm" action = "">
<input type = "hidden" name = "sysTimer" value = 0>
<input type = "hidden" name = "timeSetter" value = "">
</form>
<!-- The "PopIn" box with the timer in it -->
<div id="divPopIn" class = "popin"></div>
<!-- Content to put in the "PopIn" box -->
<div id="content" style = "display:none;">
<p style = "text-align:center;font-size:150% !important;font-
weight:bold;color:red;">
<u>Count Down:</uin
<span id = "clock" style = "position:center;padding-right:
4px;">
</span>
(min:sec)
<p>
</div>
<script>
// Continually update the time read out in the Pop-In & status bar
showtime(); ;
</script>
<br>
<br>
<a href = "javascript:showPopIn();">Run Timer Display</a>
<br>
<br>
<a href = "javascript:stopPopIn();">Stop Timer Display ()</a>
<br>
</body>
</html>
