Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Reaching an html span nested in an html div with javascript

Reply
Thread Tools

Reaching an html span nested in an html div with javascript

 
 
Steve
Guest
Posts: n/a
 
      04-18-2008
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>
 
Reply With Quote
 
 
 
 
Steve
Guest
Posts: n/a
 
      05-13-2008
On Apr 17, 9:55 pm, Steve <(E-Mail Removed)> wrote:
> 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


 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      05-13-2008
On Apr 18, 11:55 am, Steve <(E-Mail Removed)> wrote:
> 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>

[...]


--
Rob
 
Reply With Quote
 
beforewisdom@gmail.com
Guest
Posts: n/a
 
      05-14-2008
On May 13, 7:06 pm, RobG <(E-Mail Removed)> wrote:

> 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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stéphane Klein Python 2 03-30-2010 12:35 AM
Re: I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stefan Behnel Python 0 03-29-2010 08:14 PM
Can span include span? Fulio Open HTML 5 06-26-2009 10:24 PM
DataGrid (body only) contained in <span>...</span> tags Dan Bishop ASP .Net Datagrid Control 2 06-07-2004 04:00 PM
Enable drag and drop to the text between <span></span> Wang, Jay Javascript 5 05-25-2004 09:33 PM



Advertisments