Friday, February 15, 2008: Google Themes Time-Sensitive Style Switcher: How'd They Do That?
Have you ever noticed that some of Google's themes are dynamically generated based on the time of day? Pretty cool, huh? Have you ever wanted to know how to do that on your own site?Well, I don't know specifically how Google does it, but I can tell you how I did it.
Last year, 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,
Sunrise
Morning
Noon
Afternoon
Sunset
Twilight
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.
<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">
</noscript>
You can view a demo where 1 second = 1 hour to see it in accelerated action.
Labels: Web Effects
posted by Katherine at 12:41 PM
Hey Katherine,
That is one very cool web effect. I will try to use it in an upcoming website I am doing just for the fun of it. Good job! I can see why you were like a 'dog with a bone'.
Ana
2/19/2008 10:38 PM
As a php dev, I can say it would be more efficient to do this code w/ php on the server side and not javascript because:
A: there is less bandwidth because only the stylesheet link is outputted to the browser
B: if there are any js errors or browser issues it will fail.
If there is interest I'll post the code.
2/19/2008 11:43 PM
I think you missed the point, Miramar. He wants the theme to be based on the time at the visitor's location, not the servers. And while determining time based on IP block might be a possible server side solution, it is easy to get it completely wrong, especially for those using proxies, VPNs, and nationwide ISPs.
2/20/2008 12:06 AM
I would guess that Google uses the ZIP code you give the theme to calculate the visitor's timezone, then just uses an offset from the server time. Of course, this would only work if you had visitors register and give a timezone or a location.
2/20/2008 10:48 AM
This comment has been removed by the author.
2/20/2008 11:07 AM
Great work! I'm gonna try my hand at this technique and see if I can give it a go.
I have no idea what's it's going to turn out to look like but it'll be here for now.. Spaced Traveler
Thanks for the inspiration!
2/20/2008 11:08 AM
this is a cool effect - I did this using the same photo at different times of the day. Thanks!
11/15/2008 10:40 PM