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 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    78
    Thanks
    17
    Thanked 1 Time in 1 Post

    changing body class based on user's local time

    I'm trying to add a body class of 'day' if it's 6am-5pm and 'night' if it's 5pm-6am based on the user's local time.

    I tried the following but it didn't work. Any ideas?

    In the <head>
    Code:
    <script>
    function setTimesStyles() {
    var currentTime = new Date().getHours();
    if(currentTime > 5 && currentTime < 17) {
    document.body.className = 'day';
    }
    else {
    document.body.className = 'night';
    }
    }
    </script>
    Code:
    <body onload="setTimeStyles();">
    Also, is there a more elegant way to achieve what I need?

  • #2
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    This works fine for me!

    Code:
    function setTimesStyles() {
    var currentTime = new Date().getHours();
    if(currentTime > 5 && currentTime < 17) {
    document.body.className = 'day';
    }
    else {
    document.body.className = 'night';
    }
    alert(document.body.className)
    }
    Code:
    <body class="bd" onload="setTimesStyles()">

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    78
    Thanks
    17
    Thanked 1 Time in 1 Post
    Thanks, yeah I figured it out. There was a typo in my original post!

  • #4
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    I do not know what elegant means when it comes to coding, but this one has less lines:

    Code:
    function setTimesStyles() {
        var currentTime = new Date().getHours();
        document.body.className = (currentTime >= 5 && currentTime <= 17) ? 'day' : 'night';
    
    alert(document.body.className); //Just so you can see what class was applied to the body
    }
    Last edited by oVTech; 01-11-2011 at 03:15 AM.

  • #5
    New Coder
    Join Date
    Sep 2009
    Posts
    78
    Thanks
    17
    Thanked 1 Time in 1 Post
    Thank you. Is there a way to target users who have javascript turned off?

    Currently, the code in the op applies 'day' or 'night' and I targeted the necessary elements with css but what if the user has javascript turned off? They won't see either 'day' or 'night' which could be a problem.

    So is there a way to add something to my code which will apply a separate class for people with javascript turned off?

  • #6
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by cpkid2 View Post
    Thank you. Is there a way to target users who have javascript turned off?

    Currently, the code in the op applies 'day' or 'night' and I targeted the necessary elements with css but what if the user has javascript turned off? They won't see either 'day' or 'night' which could be a problem.

    So is there a way to add something to my code which will apply a separate class for people with javascript turned off?

    You can set an initial class in the body such as "dayNnight". If JS is OFF this one will fire, if JS is ON the script will override it.


  •  

    Posting Permissions

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