Reaching an html span nested in an html div with javascript

Discussion in 'Javascript' started by Steve, Apr 18, 2008.

  1. Steve

    Steve Guest

    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>
     
    Steve, Apr 18, 2008
    #1
    1. Advertising

  2. Steve

    Steve Guest

    On Apr 17, 9:55 pm, Steve <> 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/topic.dml?id=232142&t=1210604676&page=1#comment2549392
     
    Steve, May 13, 2008
    #2
    1. Advertising

  3. Steve

    RobG Guest

    On Apr 18, 11:55 am, Steve <> 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
     
    RobG, May 14, 2008
    #3
  4. Steve

    Guest

    On May 13, 7:06 pm, RobG <> 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.
     
    , May 14, 2008
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    581
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,866
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    507
    Stefan Behnel
    Mar 29, 2010
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    308
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    525
    Wang, Jay
    May 25, 2004
Loading...

Share This Page