Time Sensitive CSS Switcher (Yes! You Can Change Styles Based on Time of Day!)

Mar 8 2007


Sunrise
Sunrise
Morning
Morning
Noon
Noon
Afternoon
Afternoon
Sunset
Sunset
Twilight
Twilight

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.

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

<SCRIPT LANGUAGE="JavaScript"><!-- Beginfunction 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";
elsedisplay = "tree_sunset.css";

var 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"></noscript>

Before I go, I must give credit to that coworker I was talking about. His name’s Fidel. Check out his website at http://www.eriwebdesigns.com

Share and Enjoy:
  • Print
  • email
  • Facebook
  • Twitter
  • Google Bookmarks
  • Reddit
  • Mixx
  • Digg
  • StumbleUpon
  • del.icio.us
  • Fark
  • Yahoo! Buzz
  • Technorati




73 Responses to “Time Sensitive CSS Switcher (Yes! You Can Change Styles Based on Time of Day!)”



  1. niko says:

    Hey this is wonderful. What you think could the page be changed with similar code as well? I tried but didn’t have any luck…many thanks

  2. Coder says:

    Brilliant.Very clever idea, IE is such a pain when us developers try and create a new idea!

  3. Tijean says:

    Wonderful idea!

  4. Katherine says:

    Jaie,Sorry! I accidentally deleted your comment while getting rid of all the recent spam posts. I’ll paste it below.”Mu university’s student site has just done this same thing.out of curiosity it could have been done on the server side, avoiding any javascipt, and document.write() problems.And looking a the png problem in ie6, you may be able to solve the problems by using transparent gifs.”The PNG issue is solved, btw. Used iepngfix.As I’m sure you know, gifs really only work if you have a totally solid background. Their “transparency” isn’t quite up to snuff.

  5. Hmm, its a great idea, nice one.

  6. punkodissey says:

    This is a very good script, the best one i ever seen and i wanna use it on my wordpress blog. Can you tell me how to “set up” this script? Thanks

  7. Jamie says:

    http://www.taprootcreative.com has a similar effect that has inspired me to do it on my next project, but I hadn’t yet gotten to the coding of that yet. Thank you so much for posting, and to StumbleUpon to finding this post for me.

  8. Anonymous says:

    I was looking for the same thing… Very nice. One question can you post how your css looks like, because i have some trouble making the image go on the hole screen.10xIvo

  9. Anonymous says:

    One more thing, i want to change only one image, and i’m tryed to put it as java call function but it doesnt work. I want to chane just the image file according to the time, but not the backgroundreguards Ivo

  10. Katherine says:

    Ivo, Do you have a link to your site so I can see what you’re talking about? If the image itself isn’t the width of the full screen (or formatted to tile seamlessly), you really can’t force it to expand to the width of the screen with css. With regards to your second question, just create a div with the exact dimensions of the image and set the style of that div to have the image as its background. Then you can switch it with the styleswitcher. If you use firefox with the webdeveloper plugin, you can right click on the page and view the css on any page. It’s very helpful!Feel free to contact me directly (use contact link above), if you have any more questions.

  11. Anonymous says:

    Sorry didnt find your e-mail.here is the site i just put up:http://prazen.free.bg/test/home.htmli want to change that picture with the grass and the glass, and (maybe) the hole theme of the site.Thank you in advanceReguards Ivo

  12. Katherine says:

    You need to make a style class and apply it to the table cell that’s currently holding that image. And instead of inserting the image in the table cell, you use the background-image tag in the css.

  13. AskApache says:

    Cool idea! I wish you were using unobtrusive javascript but its nice! I much prefer using Apache .htaccess to do this same thing, no javascript, no programming, so easy. CSS Time Switcher using .htaccess

  14. Anonymous says:

    Unfortunately your page has 485 errors – ouch and ouch again!!!http://validator.w3.org/check?uri=http%3A%2F%2Fwww.katgal.com%2F2007%2F03%2Ftime-sensitive-css-switcher-change.html&charset=%28detect+automatically%29&doctype=Inline&group=0

  15. Katherine says:

    Can’t take the blame for the vast majority of those. I use blogger and most of those validation errors are caused by their code.

  16. LoLo says:

    really smart idea ! i like it

  17. Sagem Phones says:

    Does it still work in Firefox and IE?

  18. pete says:

    Excellent idea!i think i could have a use for the code! cheersagain nice!

  19. Anonymous says:

    site with the same idea:www.okc.ru

  20. Monzstro says:

    is their a copyright issue with using your code?

  21. Adrian says:

    Hi,pls forgive me for this stupid post.Im a beginer.Could let me know how’s looking a css file (for example tree_twilight.css)?Have a link where download all files? Thank you.

  22. Russell says:

    Does this account for different time zones? If I’m in California and it’s noon…and I’m seeing a “sunny” theme…what happens to someone in India that is looking at the website? Will it realize that he’s in India and display the nighttime stylesheet?



Leave a Reply