Reaching an html span nested in an html div with javascript

S

Steve

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:</u> in
<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>
 
S

Steve

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/topic.dml?id=232142&t=1210604676&page=1#comment2549392
 
R

RobG

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:</u> in
<span id = "clock" style = "position:center;padding-right:
4px;">
</span>
(min:sec)
<p>
</div>
[...]
 
B

beforewisdom

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,832
Latest member
GlennSmall

Latest Threads

Top