By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,517 Members | 1,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,517 IT Pros & Developers. It's quick & easy.

Reaching an html span nested in an html div with javascript

P: n/a
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>
Jun 27 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On Apr 17, 9:55 pm, Steve <tinker...@gmail.comwrote:
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.
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...comment2549392
Jun 27 '08 #2

P: n/a
On Apr 18, 11:55 am, Steve <tinker...@gmail.comwrote:
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.
You don't move it, you copy it.

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.
You create two divs called 'clock', which is invalid HTML so all bets
are off.

[...]
//------------------------------------------------------------------------------
// 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";}
Now there are two elements with an ID of clock.

[...]
<!-- 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>
[...]
--
Rob
Jun 27 '08 #3

P: n/a
On May 13, 7:06 pm, RobG <rg...@iinet.net.auwrote:
You don't move it, you copy it.
Yep. I made several versions of this file and my original post was
about a month ago so I guess I pasted a crappy copy with other
problems in.

The upshot is that Opera has a bug with a dom function that is fixed
in a beta.

Thanks for resonding.
Jun 27 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.