Time Sensitive CSS Switcher (Yes! You Can Change Styles Based on Time of Day!)
Mar 8 2007
Sunrise
Morning
Noon
Afternoon
Sunset
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.
- 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"><!-- 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
SAME AS: http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htmActually, even better than.And frankly, I trust DD more than some 13 year old script kiddie who comes up with this at 3 AM.
Thanks for this Katherine. I used it on my site here:http://1000geeks.com/css/time_sensative/
hmmm will it correspond with your computers clock or one timezone?
That is rather cool.
neat, although it’d be even cooler if it updated live, like if you were on the site during the hour change, it would change without having to refresh. you could add a timer to the page and have it just run every second.. ok, it’s a bit overkill, but it would add to the coolness.there’s another site out there on the web that not only has the theme based on the time, but also the weather… i forget the name of it, but it’s a neat site.
Hi. I just got done reading a DOM scripting book, so I was inspired to try it out with some of the things I just learned.This is based on having a link tag already established in the HTML.function timeCSS() {var sheet = document.getElementsByTagName(‘link’)[0];var sheetFile = sheet.getAttribute(‘href’);alert(‘The css file is: ‘ + sheetFile);var dateToday = new Date();var timenow = dateToday.getTime();dateToday.setTime(timenow);var thehour = dateToday.getHours(); if (thehour > 12) { sheet.setAttribute(‘href’,'styles/after12.css’); } else if (thehour < 12) { sheet.setAttribute(‘href’,'styles/before12.css’); }}You can then use your favorite onLoad method to call the script. This could probably be reworked slightly to create a new link element node with a smaller stylesheet calling only the differences from a base sheet. That way, you wouldn’t need to have multiple full stylesheets.
This is very cool.
I have a question – does it display the appropriate CSS according to the user’s computer time or your time?
Awesome! I guess the next step would be to dynamically create the gradients and have it change everyminute. I’d spend more time on your site then google if that was the case
I’m thinking about making this as a kind of wallpaper that maybe changes depending on time. We’ll see.
kulpreet, Since this uses javascript it will use the users computer time.javascript code uses commands to pull the information from the browser.
Very nice. Great idea & design
Interesting enough. Now what you should do is:Get IP Address of the visitor, locate its procendence (e.g. mine: Lux, EU.)Get timezone in the region (e.g. mine: gmt+1)Set css accordingly.Share the script under Creative Commons.
Cheers!/Will. (digg: williamm)p.s. this idea is because the js isn’t working on Safari, and your site has the afternoon css whie its nearly 1am.
Here is a version of the same page that avoids ‘document.write()’ and switches between alternate stylesheets on the fly:http://www.wingo.com/katgal/and a demo where one second == one hour:http://www.wingo.com/katgal/
Here is a version of the same page that avoids ‘document.write()’ and switches between alternate stylesheets on the fly:http://www.wingo.com/katgal/and a demo where one second == one hour:http://www.wingo.com/katgal/index_demo.html
Is there anyway this can be applied to a Goggle Blogger page? Does anyone know? Email me if you have any thoughts.
i reckon you could choose some better colour schemes seeing as sunset blends the purple and yellow into a fudgy brown but other than that very cool
By the way, none of the links on your sidebar work.
In response to Andrew, all of the sites for tv stations owned by CBS change the logo based on the current weather (for example, wcbstv.com). The complete list of sites is at cbslocal.com (just the CBS sites, though).
As an anonymous said above, there is a bit of a logic error in the code. I tried it out at various times, and found that between 00:00:01 (just after midnight) and 01:59:59 it displays the sunset theme instead of twilight. A simple fix would be to change this code:else if (thehour > 1) display = “tree_twilight.css”; else display = “tree_sunset.css”;to this:else display = “tree_twilight.css”;
Wow , it’s amazing. I like this concept.
Inspired. Thanks.
wonderful !!
wow! great, until now my site http://designersyard.com is not good as that.
oh my god! I’ve actually thought about a code like this for years! well, a few years ago I was wondering if there was a code where the layout could switch depending on the time of the day, my plan was to display what “I’m doing right now” like sleeping at night, at school during the day, etc. I love this code, and I’m probably going to use it someday
very cool.a few notes though, to make this XHTML strict…instead of: LANGUAGE=”JavaScript”use: type=”text/javascript”And:var css = ”;Change to:var css = ”;lastly, instead of the whole noscript stuff, place the default style sheet just above the script. the javascripts stylesheet call will overwrite the fallback script.(http://www.ensellitis.com for example of how i did it, sorry for the sucky graphics, i will be changing when i have more time)thanks for this, i suck at java, and didnt want to do this via PHP
This is amazing cat, it inspires me with a new idea for my next IPB Skin, thanks a million