When I set out to redesign this site, I had an idea: Could I make the stylesheet change based on the hour of the day? Sounds easy enough, right? So, I started searching the Internet for some code I could use. I’m a novice when it comes to javascript and php, so I was hoping to find some “plug and play” code, so to speak.

I found code to switch styles based on day of the week, and month of the year, but not time of the day. The month/day code all used php, which used the SERVER time. So, it would switch styles based on the time stamp of the server where my website was hosted. But, since my styles were of the morning/noon/night variety, that wouldn’t work. I was told I would have to use javascript, a client-side code, so it would work based on visitors’ local time.

So, I began posting in various forums, hoping to find someone to help me. Still, no luck. I was beginning to think I would have to abandon the idea.

But I just couldn’t let it go. I was like a dog with a bone. I kept searching…hoping that somehow I would find a buried treasure somewhere online. I was about to give up when I decided to ask one of my coworkers, a web programmer. I felt guilty asking for his help on a personal project, but I got over it!

Sure enough, in just a few minutes, he whipped out some code and told me to give it a try. And it worked! I was giddy. I awaited the turn of the hour, so I could see the magic in action. At 3 pm, I hit refresh, and voila. The stylesheet changed from my blue “noon” theme, to the blue/orange “afternoon” theme.

I have six different stylesheets. See the thumbnails at right.

* From 5 am to 8 am, it displays the “sunrise” theme.
* From 8 am to 12 pm, it displays the “morning” theme.
* From 12 pm to 3 pm, it displays the “noon” theme.
* From 3 pm to 6 pm, it displays the “afternoon” theme.
* From 6 pm to 9 pm, it displays the “sunset” theme.
* And finally, from 9 pm to 5 am, it displays the “twilight” theme.

Here’s the code I used to make it happen:

 <script LANGUAGE="JavaScript">
<!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();

if (thehour > 20)
display = "tree_twilight.css";
else if (thehour > 17)
display = "tree_sunset.css";
else if (thehour > 14)
display = "tree_afternoon.css";
else if (thehour > 11)
display = "tree_noon.css";
else if (thehour > 7)
display = "tree_morning.css";
else if (thehour > 4)
display = "tree_sunrise.css";
else if (thehour > 1)
display = "tree_twilight.css";
else
display = "tree_sunset.css";

var css = '< ';  css+='link rel="stylesheet" href=' + display + ' \/';  css+='>';

document.write(css);
// End -->
}
</script>
<script language="javascript">getCSS();</script>  

You can select a default stylesheet, to account for folks with javascript disabled, by adding the following:

  <noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</link></noscript> 

Demo: http://www.katgal.com/2007/03/time-sensitive-css-switcher-change.html
Source: http://www.katgal.com/2007/03/time-sensitive-css-switcher-change.html

Related Listings:

1. JQuery Script – Style sheet switcher jQuery is a Javascript library that takes this motto to...
2. SyntaxHighlighter Ajax SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed...
3. Tab Container Themes After working on a YUI TabView theme for the AjaxControlToolkit’s...
4. Two Style Sheets CSS and Netscape 4.xx Issues Netscape 4.xx is now more...
5. Javascript Style Sheets JSS stands for Javascript Style Sheets, it is a jQuery...

Do you like this post?

Email: