Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Clock Script Stops Updating When Scrolling Down

    My bad if this was answered somewhere else. I did search the forums but was unable to locate an answer (It is kind of a specific question)

    I have an odd problem. I have the following clock script:

    Code:
    function Clock()
    {
         var today=new Date();
         var h=today.getHours();
         var m=today.getMinutes();
         var s=today.getSeconds();
    // add lead zeros to numbers less than 10
         h=checkTime(h);
         m=checkTime(m);
         s=checkTime(s);
         document.getElementById('Clock').innerHTML=h+":"+m+":"+s;
         t=setTimeout('Clock'), 500);
    }
    
    function checkTime(i)
    {
         if (i<10)
           {
             i="0" + i;
           }
         return i;
    }
    Loaded at the page load and assigned to a div:

    Code:
    <body onLoad = "Clock();">
    
    <!--the clock-->
    <div align = "right" id = "Clock"></div>
    With this style applied:

    Code:
    #Clock {font-size: 30pt;
                position: fixed;
                top: 0px;
                right: 0px;
                background: #ffffff;
                z-index: 3;
               }
    The problem I've run into is this: In Chrome, whenever I scroll down, even by just one tap/click of the down arrow, the clock stops updating the time in, pardon the pun, real-time. But the second I scroll completely to the top of the page, it goes back to counting. I tested in the current (as of Nov 20th 2010) versions of FireFox, Opera and IE9 and the only browser that seems to produce this problem is Chrome. Any ideas?
    Last edited by nihilon; 11-20-2010 at 11:08 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2010
    Posts
    163
    Thanks
    3
    Thanked 25 Times in 25 Posts
    try removingt=setTimeout('Clock'), 500); and change your body tag to <body onLoad = "setInterval(Clock, 500);">

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by gizmo1650 View Post
    try removingt=setTimeout('Clock'), 500); and change your body tag to <body onLoad = "setInterval(Clock, 500);">
    Gave it a shot. No deal, though I did notice something I didn't spot before. As before, the clock happily ticks away while the page is parked completely at the top. If I scroll down, even just one tick, it stops working in real-time. However, and this is what I did not notice before, each time I scroll, up or down, the clock updates itself and stops once I've stopped scrolling. This is only in Chrome that this happens .

    Ironically, Chrome also happens to be the only browser I have that handles the <canvas> tag appropriately . Go figure

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nihilon View Post
    Gave it a shot. No deal, though I did notice something I didn't spot before. As before, the clock happily ticks away while the page is parked completely at the top. If I scroll down, even just one tick, it stops working in real-time. However, and this is what I did not notice before, each time I scroll, up or down, the clock updates itself and stops once I've stopped scrolling. This is only in Chrome that this happens .

    Ironically, Chrome also happens to be the only browser I have that handles the <canvas> tag appropriately . Go figure
    Just tested a similar setup and think I can help. It seems to be a redraw bug. When I scrolled down only a few pixels (by dragging the scroll bar), then some of the fixed div refreshed (the top of it), but not the rest.

    One solution is to change the div in another (but indistinguishable) way, such as changing the colour of the text by a single bit, then set a timeout of one millisecond to change it back again. This seems to force the redraw.

    I've made an example of doing exactly this, which you can see in operation here.
    http://webinterfacetricks.com/chrome_redraw_bug/

    The source code shows you which two lines (changing the colour and setting a timeout to change it back), make all the difference on chrome.

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by interfacetricks View Post
    The source code shows you which two lines (changing the colour and setting a timeout to change it back), make all the difference on chrome.
    Ok, I understand what is going on after having read the code but I am brand-spankin' new to javascript and can't, for the life of me, figure out how to tie the new code into or modify my original code. I guess, specifically, what does "box" (box.firstChild.nodeValue) correlate with (from the original script, if anything) or will this require a rewrite? Please try and just point in me in the right proverbial direction, rather than giving a full-blown do-it-for-me explanation if possible. I will ask further questions if needed, but I like figuring things out on my own if at all possible . Thanks for providing your insight and help .


    UPDATE: Disregard my last. For one reason or another, I did not notice the variable declaration that explained what box was . Now all is clear. Thank you for the answer interfacetricks! It works flawlessly.
    Last edited by nihilon; 11-22-2010 at 02:15 PM. Reason: I am an idiot


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •