How to apply onload( ) function on div?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • matheussousuke
    New Member
    • Sep 2009
    • 249

    How to apply onload( ) function on div?

    Hi, I'm using a script which changes the background acording to the time, it works fine, but it breaks my css because it is loaded from the body. Is there a way I can load it from the div?


    Here is the js
    Code:
    // © copyright Sibran Lens
    // Leave this comment if you want to use this script for your website
    // http://blog.e-ss.be
    
    
    function CSSTimeSwitch()
    {
     datetoday = new Date();
     timenow=datetoday.getTime();
     datetoday.setTime(timenow);
     thehour = datetoday.getHours();
    
     if (thehour >= 20)
      display = "evening";
     else if (thehour >= 17)
      display = "late-afternoon";
     else if (thehour >= 13)
      display = "afternoon";
     else if (thehour >= 11)
      display = "noon";
     else if (thehour >= 7)
      display = "morning";
     else if (thehour >= 1)
      display = "night";
     else
      display = "general";
    
     var thebody =	document.getElementById("page");
     
     thebody.className= display;
     									
    
    }


    And here is the line that loads the function
    Code:
    <body id="page"  class="yoopage <?php echo $this->params->get('leftcolumn'); ?> <?php echo $this->params->get('rightcolumn'); ?> <?php echo $itemcolor; ?> <?php echo $blog; ?> <?php echo $yootools->getCurrentToolsColor(); ?>" onload="CSSTimeSwitch();">


    the function is
    Code:
    onload="CSSTimeSwitch();"
    Just need to find a way to make it load on div, instead of the body, I tried to insert on the div, but didnt work.
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    change line #28 of the JavaScript function accordingly.

    Comment

    • matheussousuke
      New Member
      • Sep 2009
      • 249

      #3
      Already tried that:

      Code:
      var thebody =    document.getElementById("page-body");
      page-body is a div name. Didn't work.

      Comment

      • matheussousuke
        New Member
        • Sep 2009
        • 249

        #4
        There is also this css code
        Code:
        /*--- after 01:00  -----*/
        body.night {background:url(../img/night.jpg);}
        
        body.night h1 {color: #8f8f8f;}
        
        /*--- after 07:00  -----*/
        body.morning {background:url(../img/night.jpg) top no-repeat;}
        body.morning #timer {background:url(../img/0700.gif) 80px top no-repeat;}
        body.morning h1 {color: #515e64;}
        
        /*--- after 11:00  -----*/
        body.noon {background:url(../img/night.jpg) top no-repeat;}
        body.noon #timer {background:url(../img/1100.gif) 80px top no-repeat;}
        body.noon h1 {color: #7b8574;}
        
        /*--- after 13:00  -----*/
        body.afternoon {background:url(../img/night.jpg) top no-repeat;}
        body.afternoon #timer {background:url(../img/1300.gif) 80px top no-repeat;}
        body.afternoon h1 {color: #9b967e;}
        
        /*--- after 17:00  -----*/
        body.late-afternoon {background:url(../img/night.jpg) top no-repeat;}
        body.late-afternoon #timer {background:url(../img/1700.gif) 80px top no-repeat;}
        body.late-afternoon h1 {color: #856e57;}
        
        /*--- after 20:00  -----*/
        body.evening {background:url(../img/night.jpg) top no-repeat;}
        body.evening #timer {background:url(../img/2000.gif) 80px top no-repeat;}
        body.evening h1 {color: #6f5832;}
        does the "body" tag interfer somehow?

        Comment

        • Dormilich
          Recognized Expert Expert
          • Aug 2008
          • 8694

          #5
          do you have a demo page?

          Comment

          • matheussousuke
            New Member
            • Sep 2009
            • 249

            #6
            Solved that already, I'll post the whole script here once I have finished it.

            By the way I had to change the
            Code:
            body.
            attribute on the css and the funcion (document.getEl ementById("page-body");)
            Code:
            document.getElementById("divname");
            attribute on the js to the div name. Just in case if someone need some help with the same issue.

            Comment

            • matheussousuke
              New Member
              • Sep 2009
              • 249

              #7

              That's the page where the script is. Now I've got another problem, the script is going backwards in time, it was working fine yesterday, but after I messed with the
              OS DST, the script started acting like that. The computer clock is ok now, but the script reversed the time, e.g.: It shows day, when it has to show night.

              Comment

              • matheussousuke
                New Member
                • Sep 2009
                • 249

                #8
                Just had to restart chrome. That was its fault.

                So, here we go, I'm gonna post a link here to the script, it goes to another topic (Article):

                Comment

                Working...