changing body class based on user's local time

cpkid2 · 01-10-2011, 11:42 PM

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?

oVTech · 01-11-2011, 02:02 AM

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()">

cpkid2 · 01-11-2011, 02:07 AM

Thanks, yeah I figured it out. There was a typo in my original post!

oVTech · 01-11-2011, 02:10 AM

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
}

cpkid2 · 01-11-2011, 02:14 AM

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?

oVTech · 01-11-2011, 02:25 AM

Quote:

Originally Posted by cpkid2

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.