Discover the best of the web!
Learn more about Digg by taking the tour.
Time Sensitive CSS Switcher
katgal.com — 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?
pb30- 1782 diggs
- digg it
- Terrin, on 10/12/2007, -14/+25Nifty
- willemmulder, on 10/12/2007, -28/+8not too nifty... it's a pity he writes about it as if it's the most genius idea of the century.
Other than that: funny :) - dahamsta, on 10/12/2007, -23/+10The fact that you think it's a he would suggest you didn't even get off your critical arse and visit the site.
- willemmulder, on 10/12/2007, -21/+7of course I did... (yes, I did miss the 'katherine', but I did read the text...)
And look at your own comment... you're so kind and your comment is so based on facts... (not) I just say that I don't think it's genius, but that it's funny. Am I master of critics now, and very rude? What's your problem? - PaulOwen, on 10/12/2007, -2/+81Javascript time functions have been around a long time. Sure it looks nice but essentially, you were able to do this in 1999.
- GrendelT, on 10/12/2007, -3/+16"Sounds easy enough, right?"
Yep, sounds easy enough. - themoose, on 10/12/2007, -10/+27I'd do it with php. That way it'll work in every browser because php is server-side.
- PhilH, on 10/12/2007, -1/+20@themoose : It explains in the article why he had to use javascript: he wanted it to change for morning/afternoon etc, meaning he had to use local time, which AFAIK can only be done client-side. Although his code does also have a fallback option for those browsers without javascript.
- Tippis, on 10/12/2007, -9/+3@ PhilH
"he wanted it to change for morning/afternoon etc, meaning he had to use local time, which AFAIK can only be done client-side"
It can be done server-side as well -- it just requires a bit of research (or a pile of cash). What you need is a rather simple ip-to-country conversion (which you can either download from all over the place, or - if you're nuts - build adaptively on your own using tracebacks) then a check for that country's DST settings, and bam! Client local time is yours. If you feel strapped for time, you can pay for the ip-to-country service, and get timezone conversions as part of the package.
If the browser is well-behaved, not even proxies will cause a problem.
...now, if you want it to continuously cycle through 96 different stylesheets every 15 minutes, *then* we're going to need some extra voodoo... ;) - Tredici, on 10/12/2007, -1/+14You could take it one step further and have the leaves fall from the tree and gather at its base as we enter Autumn/fall, then have the tree slowly grow leaves come Spring.
- resplence, on 10/12/2007, -7/+24Tacky.
- sr3yas, on 10/12/2007, -9/+3Quite
- djlosch, on 10/12/2007, -0/+1i had this idea a few days ago working on my site redesign, and thinking it out, you prime the javascript code and fallback on the php, but you still run into the problem with stupid transparent background aliasing in icons. who the hell wants to constantly draw up new icons for different backgrounds.
- qasabah, on 10/12/2007, -0/+1@ themoose (or anyone else)
Know where I could find any examples of producing something like this using php? - killercow, on 10/12/2007, -1/+6This works a lot better, and is simpler to change colors with:
http://innerheight.com/greenery/articles.php?id=1
My chameleon colors script
check: (NSFW-ish)
http://www.loveart.nl/
And then:
http://www.loveart.nl/?color=889900
http://www.loveart.nl/?color=109900
http://www.loveart.nl/?color=009900
Same html, clever use of transparent png images, and a tad of php wizzardry. - resplence, on 10/12/2007, -1/+7Interesting website you run there.
- Tippis, on 10/12/2007, -0/+1@ qasabah
"Know where I could find any examples of producing something like this using php?"
On php.net, as it happens, although not for this exact purpose... and not quite all of it.
First, you can nick this part, which php.net uses to figure out which download mirror is closest to you:
http://ch2.php.net/source.php?url=/include/ip-to-country.inc
If you're running 5.1 or higher, you should pretty much be able to chuck that bit into the various timezone_offset functions, or else, you'll need to do some research on what the daylight savings differences and timings look like in various countries and manually create a conversion table. - synystar, on 10/12/2007, -3/+2@paulowen Who was using CSS in 1999?
- djlosch, on 10/12/2007, -0/+1owned (digg fubar's it a little)
http://www.loveart.nl/?color=889900%22%3E%3Cp%3Eowned%3C/p%3E
- willemmulder, on 10/12/2007, -28/+8not too nifty... it's a pity he writes about it as if it's the most genius idea of the century.
- Rockyrowks, on 10/12/2007, -18/+5Creative and Origional
- edmack, on 10/12/2007, -15/+4My website does this too. It takes the colour scheme from the time of year, and takes the brightness ect from the time of day
http://www.edmack.com - nicnic77, on 10/12/2007, -17/+5Nice one. I've just done exactly the same thing in Flash, but based it on the server time using php rather than the users local time - quite an important difference. Also, I've allowed the user to wind the time forward and backwards.What can I say, my Creative Director has some funny ideas...
- championchap, on 10/12/2007, -0/+1Reminds me of projectDCK.com
they base it on the server time too.. though you cant change the time there at all.. its because they have their own town and obviously its in a specific time zone.
- championchap, on 10/12/2007, -0/+1Reminds me of projectDCK.com
- Syndrome, on 10/12/2007, -1/+13Nice, reminds me of www.1976design.com/blog where the header illustration changes depending on the weather where the picture was based on.
- JyPhy, on 10/12/2007, -4/+0Yeah I already saw this one, but didn't remember the link. Thanks for make me remember it. I'll bookmark it now hehe.
- Laarwick, on 10/12/2007, -5/+1Ooh cool, that's pretty swish. *thumbs up*
- memper, on 10/12/2007, -1/+19Interesting idea.
Adding some re-usability, proper scoping, and seperation of content from the JavaScript:
< !-- Begin
function getCSS(files){
var dt = new Date();
dt.setTime(dt.getTime());
return files[Math.floor((dt.getHours()/24)*files.length)];
}
var cssFiles = ["dark.css", "twighlight.css", "morning.css", "noon.css", "afternoon.css", "evening.css", "twightligh.css", "dark.css"];
var filePath = getCSS(cssFiles);
alert(filePath);- xutopia, on 10/12/2007, -2/+5Consider the following:
Array.prototype.getByTime = function(){
return this[ Math.floor((new Date().getHours() / 24) * this.length) ];
}
var filePath = ["dark.css", "twighlight.css", "morning.css", "noon.css", "afternoon.css", "evening.css", "twightligh.css", "dark.css"].getByTime();
There is no need to setTime() to the getTime() value. It's already set to it. The extension here allows you to use not only CSS but also different sayings for the time of day.
So if you wanted to write a message somewhere on your page to go with the CSS file here's how you could do it:
var message = ["Night is what starts the day", "Early worm gets eaten by the bird.", "Lunch is not a date.", "Afternoon goes by faster when you have plenty to do.", "Home feels so good after work.", "Silence lets the soul wander where it wants to be."].getByTime();
Now you'd be able to add that to your document.title or document.write it somewhere on your page without having to write a second function to do the same logic. - memper, on 10/12/2007, -2/+0I was leaving in the idiocyncracy of her original attempt in case she had found on some browser that indeed the time needed to be set to itself before the onload event of the page occurred. It wouldn't surprise me if this were true.
Consider that extending the Array object with a prototype will then add memory usage to every single array in your javascript on that page. This is not the proper place to use prototype.
The solution I filed away into my SVN is:
function getArrayValueByHour(arr){
return arr[Math.floor((new Date().getHours()/24)*arr.length)];
} - seventoes, on 10/12/2007, -0/+4xutopia, thats an ok way to do it, if your fine with extending native objects. I hate doing that, unless its something that is specified in the js standards and isnt supported by most browsers, then ill emulate it if it isnt available, but really i dont see any reason to extend native objects like array with stuff that would do just fine as a normal function.
- xutopia, on 10/12/2007, -0/+2@seventoes "but really i dont see any reason to extend native objects like array with stuff that would do just fine as a normal function."
The compelling argument for extending prototype is that code readability and maintainability goes way up. You also don't have to name your methods with what kind of objects they take as arguments.
IMO the concern for speed is unfounded. The speed difference between the two differences is next to nil and so is the memory difference. The truth is that if either method fails because of the performance of your Javascript you have other problems on your hands. - kenman345, on 10/12/2007, -0/+4i love a good geekout on digg. thanks for all the cool ideas
- xutopia, on 10/12/2007, -2/+5Consider the following:
- sicapitan, on 10/12/2007, -10/+5NEWS AT 10, YOU CAN NOW DRIVE CARS WITH WHEELS
- zakainsworth, on 10/12/2007, -4/+3Nice work! Very clever!
- ylon, on 10/12/2007, -5/+0That's super! I had thought of this four years ago and I'm glad someone's pursued that. Handy!
- FrankieB078, on 10/12/2007, -4/+1Wtf??? I started working on something like this a few weeks ago..... : (
- justinvt, on 10/12/2007, -0/+2Well maybe you should have shat out a half-baked version of it like this chick, and we could be writing about your site right now.
- ifonly, on 10/12/2007, -10/+1Pointless, if you do this you must be sad.
- SteaminTmann, on 10/12/2007, -12/+6personally, I would do this with PHP, just as easy, using date() functions and cases, that and it'll work if the use has JS disabled.
- CraigJ, on 10/12/2007, -7/+2I was going to say the same thing. iI generally include my stylesheets by way of php anyway. checking the time, or datewould be really simple, and as you say functions without javascript.
I don't know why your comment was dugg down... - FinalDragoon06, on 10/12/2007, -1/+12I think it mentions in the article that you would then be using server time, and if the visitor isn't in the same timezone it would be thrown off.
That method would work fine if you have a user login and then base it on their settings (provided they set the timezone) - TeebZ, on 10/12/2007, -2/+14Read the article and the comments before posting.
PHP is server-based: you get the time on the server, not the time on the users computer.
With Java-Script you can access the users local time.
"Surely its stupid if its not local time? Otherwise you log on in the middle of the night and get blinded by eSunshine?" / robertcamb5 - Tippis, on 10/12/2007, -7/+1@ TeebZ
"PHP is server-based: you get the time on the server, not the time on the users computer.
With Java-Script you can access the users local time."
...and since it's very easy to figure out the local timezone from the server, you can do the same in PHP in about zero seconds flat.
- CraigJ, on 10/12/2007, -7/+2I was going to say the same thing. iI generally include my stylesheets by way of php anyway. checking the time, or datewould be really simple, and as you say functions without javascript.
- Switch22, on 10/12/2007, -17/+3This is done very simply in PHP, I don't know why it took the author so long to find a solution.
- dbr_onix, on 10/12/2007, -2/+6Because the date() function will only return the server time, if the user is in a different time-zone, it will be wrong..
- MondayJBlack, on 10/12/2007, -1/+3My brother did the same thing on his site with Javascript and had 24 hours of the day. Javascript has the added benefit of making the site portable (so you can send it on a CD)
- Joshuarr, on 10/12/2007, -0/+7...to all the cold dark places on the globe that lack broadband. (Even your underwater friends.)
- DelMonte, on 10/12/2007, -2/+8I wish the windows in my operating system gradually changed color depending on the time of the day or the outside temperature.
- PhilH, on 10/12/2007, -1/+3Well you could write a simple HTML file using a variation of this code to change the background image/colour at certain times, and set it as your wallpaper in windows. But that would only affect the background, not the windows themselves.
- ErikHK, on 10/12/2007, -8/+1Well this is actually pretty worthless. :)
1) Not unique
2) Not cool
3) She uses '', bad!- ErikHK, on 10/12/2007, -4/+1oh God, digg filtered out my html code, I meant script language="", bad!
- purdo, on 10/12/2007, -2/+8using javascript to switch a stylesheet is hardly ground breaking.. i can't understand why the guy is so excited by this?
- FinalDragoon06, on 10/12/2007, -3/+5while a switch may not be ground breaking, switching it based on the time of day is [to some].
And I'd have to assume the writer is a female by the name.
I bet most of the people who dugg the article were thinking of doing this very thing, but didn't have a good method to do so (we're not all proficient in javascript you know) - dbr_onix, on 10/12/2007, -0/+9"but didn't have a good method to do so (we're not all proficient in javascript you know)"
I barely know Javascript, but about 20 seconds searching and a few minutes of shoving together a few lines of code would have provided the same solution..
Searching for "Javascript get time" and "Javascript set stylesheet", and combining the two shouldn't be too hard for someone who at least knows HTML/CSS (Or the basics of PHP, particularly if(){} statements)
"switching [the stylesheet] based on the time of day is [groundbreaking] [to some]."
I'd not really say it's ground-breaking, but it is a nice idea - Simple, not obtrusive, makes the site seem slightly more.. "dynamic" if you visit it regularly.
"I bet most of the people who dugg the article were thinking of doing this very thing, but didn't have a good method to do so" - I'd think it's more likely the people Digg'ing the article think it's a good idea - If they had thought of it, I'd hope most of them would be able to work out how to do it (Much like this article's author did)
- FinalDragoon06, on 10/12/2007, -3/+5while a switch may not be ground breaking, switching it based on the time of day is [to some].
- luringen, on 10/12/2007, -2/+0Kinda cool ;)
- memper, on 10/12/2007, -4/+10A designer spreading the good news about JavaScript to fellow designers hardly seems useless. Yes some people know how to do this, and could do it in a few minutes. That isn't the point though.
As more and more folks become more code savvy, developers are just going to have to deal with the fact that their uber developer skills are being absorbed into an average percentile. Folks new to the knowledge are bound to be excited about it. You can either throw the growing community the big meh and evolve away, or you can lead and share with them some best practice and knowledge of a place you have already been.- purdo, on 10/12/2007, -1/+1"As more and more folks become more code savvy, developers are just going to have to deal with the fact that their uber developer skills are being absorbed into an average percentile"
...but the author of site didn't write any code.. he/she asked a "uber developer" to do it for him/her...
so let's not start speculating on the demise of the average developer quite yet...
- purdo, on 10/12/2007, -1/+1"As more and more folks become more code savvy, developers are just going to have to deal with the fact that their uber developer skills are being absorbed into an average percentile"
- tybris, on 10/12/2007, -0/+6Would be kind of cool if it was continuous.
- linuxinit, on 10/12/2007, -9/+1I like to avoid JS as much as possible. You can do this with PHP very easily as well:
$dateUnit = date('H');
switch($dateUnit) {
case "01" : $style = "1AM.css";
break;
case "02" : $style = "2AM.css";
break;
case "12" : $style = "noon.css";
break;
case "20" : $style = "8PM.css";
break;
default : $style = "default.css";
break;
}
Adapted from hourly image rotator ( http://linuxinit.net/site/index.php?id=15 )- jasongdx, on 10/12/2007, -0/+7Like countless others have already posted, when you use PHP it is using the SERVER's time, so if your visitor is in another timezone, possibly even an other country, the display will be wrong for them. JavaScript uses the time from the visitor's computer, so the display is always correct.
- Tippis, on 10/12/2007, -1/+3...and again, that is not a problem since you can also use PHP to figure out the _client's_ local time, and switch it from there. Sure, the date() call isn't the right thing to do here, but some of the comments seem to imply that you *must* use client-side scripting to get the client local time, and that is simply not true.
- koick, on 10/12/2007, -0/+2You *can* do it in php: get the IP # of the client machine, do a geo lookup and blamo, you've got a good guess of local time. I wouldn't want to bother since I'm not sure what the point is for a blog. Now, I could see businesses having a different sheet (or page even) depending on if they were currently open or closed...
- linuxinit, on 10/12/2007, -0/+0If it's for a business, they operate based on their local time, not the client's time.
- dhenderson, on 10/12/2007, -0/+23A front page story for an if statement...
- Ventuvo, on 10/12/2007, -0/+1SAME AS: http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm
Actually, even better than.
And frankly, I trust DD more than some 13 year old script kiddie who comes up with this at 3 AM. - aura, on 10/12/2007, -0/+1Not for an if statement, for the idea of having your website appearance mimic the outside world, in a way I hadn't considered before.
- tybris, on 10/12/2007, -0/+1@aura
All of us Web 1.0 veterans have... Wishing your visitor goodmorning/afternoon/evening was a de facto standard. Subsequently changing your site's appearance depending on the value was an obvious thing to do. You can probably find some old DHTML books describing exactly how to do this.
- Ventuvo, on 10/12/2007, -0/+1SAME AS: http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm
- dogshaft, on 10/12/2007, -0/+2I saw a site that did the same kind of thing last week, though it only seemed to have a night and a day version, but it did look a lot nicer... http://www.taprootcreative.com
If you look at it again in 12 hours, it will be totally different. - Lostangel, on 10/12/2007, -2/+2I had this set up on my old website design almost 5 years ago... this isn't "new." But congratulations for figuring it out again? (Almost feels like an AJAX deja vu...)
- soulinthestars, on 10/12/2007, -0/+0When I did this to one of my sites a few years ago the coolest part was the knowledge that I was able to implement my random idea by writing a piece of code as simple as I thought it should be. While the idea might not be "new", there's certainly something in the discovery that your website can do something you hadn't considered before. Aren't you excited when you succeed at something you're attempting for the first time?
- wildwobby, on 10/12/2007, -2/+1function getCSS()
27{
28 datetoday = new Date();
29 timenow=datetoday.getTime();
30 datetoday.setTime(timenow);
31 thehour = datetoday.getHours();
32
33 if (thehour > 20)
34 display = "/css/twilight.css";
35 else if (thehour > 17)
36 display = "/css/sunset.css";
37 else if (thehour > 14)
38 display = "/css/afternoon.css";
39 else if (thehour > 11)
40 display = "/css/noon.css";
41 else if (thehour > 7)
42 display = "/css/morning.css";
43 else if (thehour > 4)
44 display = "/css/sunrise.css";
45 else if (thehour > 1)
46 display = "/css/twilight.css";
47 else
48 display = "/css/sunset.css";
49
50 var css = '';
53
54 document.write(css);
55// End -->
56}
57
58 - kpeatt, on 10/12/2007, -0/+1It really does sound easy enough. In fact, really easy. Come to think of it... why was this dugg in the first place?
- echo2501, on 10/12/2007, -0/+1Hey, everyone else is doing it.
Change CSS on the fly:
http://www.digitalbonsai.com/change_css.php - Magillicutti, on 10/12/2007, -0/+0boo
- Stormen, on 10/12/2007, -0/+1Now the only thing we need is CSS switching by the SECOND! Anybody up for the challenge? ;)
- nicholasjon, on 10/12/2007, -0/+0I've seen tenth of-a-second switching -- it wasn't pretty. ;)
Seriously though, this isn't that new really. Dunstan Orchard
http://www.1976design.com/blog/
was doing it long long ago (my first experience with the concept), I've been doing it for a while
http://www.nicholasjon.com/permalink/2007/1/14/time_sensitive
and as the links above show it's been around the block more than a few times.
What I really find fascinating about things like this is the idea of ambient information -- if you go to a my site, or any site using these sorts of techniques, you sort of "pick up" more information than just the text on your screen. I think we'll see a lot of headway in this design direction over the next few years.- blueigloo, on 10/12/2007, -0/+1Awesome, the last comment on your blog post is by your MOM! :D
- justinvt, on 10/12/2007, -0/+1Grrrr, if you are going to program something this f-ing simple, at least make sure the little things like image transparency work right, and SIFR is such a copout. Why not work a little harder on your xhtml/css typography before resorting to a technology that degrades so poorly.
- jellygraph, on 10/12/2007, -0/+1At first, when I read the heading, I was intrigued... Is it possible to really do something like this in pure CSS? And then I read the article, and found to my amusement that some person was hyper-ventilating over some basic JavaScript code that even the most junior web developer should be capable of... Whats happening to the content on Digg? Even more suprising, at this point of time, its got 1278 diggs...
Anyhow, the best solution I can think of would be to write a PHP script that generates the CSS file and then Apache modrewrite it - ProaSailor, on 10/12/2007, -0/+0Here 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/ - ProaSailor, on 10/12/2007, -0/+0Here 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 - darlyn, on 10/12/2007, -0/+1Lol this is good ... I have some of the coding knowledge. but wish I had the creative will ...
- teknikqa, on 10/12/2007, -0/+0Interesting, but it would make the site kinda confusing. Imagine digg with such a script. No one's gonna recognize the site at first go! Google has kept the same look and people instantly identify it.
- adubyailkinson, on 10/12/2007, -0/+1"sitting waiting for the system time to change to 3pm...." Local time... why not just manually adjust to test for results?
- GLSmyth, on 10/12/2007, -0/+1Interesting information.
- katesara, on 12/24/2007, -2/+0Senpai IT Solutions is a fast growing company with an expanding IT development team. We specialize in software, web, and database development, cryptography, corporate design, and Flash animation. We deliver our solutions to small businesses, corporate customers, financial institutions, and government organizations.
http://www.senpai-it.com/
SEERVERS
http://www.senpai-it.com/dedicated_servers.php
SOLUTIONS
http://www.senpai-it.com/tech.php
PROJECTS
http://www.senpai-it.com/projects.php
ABOUT US
http://www.senpai-it.com/about.php
CONTACT
http://www.senpai-it.com/contact.php
Dedicated Servers
€69: 2.8GHz, 2GB RAM, 800GB HDD | €99: 2.8GHz, 4GB RAM, 800GB HDD | €229: 3.0GHz, 6GB RAM, 1.5TB HDD
http://www.senpai-it.com/dedicated_servers.php
Security & Cryptography
Attack feasiblisity and security analysis | System security implementation | Remote hands service for your server
http://www.senpai-it.com/tech.php#crypto
E-Commerce
Development of web shops | Development of financial software | Development of e-paymet systems
E-Commerce
Development of web shops | Development of financial software | Development of e-paymet systems
http://www.senpai-it.com/tech.php#ecommerce
Software Development
Business analysis and CRM systems | Bug fixing and application testing | Development of network protocols
http://www.senpai-it.com/tech.php#software
Design & Artwork
Corporate design, print production | Application interfaces design | All kinds of computer graphics
Design & Artwork
Corporate design, print production | Application interfaces design | All kinds of computer graphics
http://www.senpai-it.com/tech.php#design
Web Development
Development of web sites and portals | Flash animation and Action Scripting | Development of web services
http://www.senpai-it.com/tech.php#web
Finding misplaced or hidden information from websites
http://www.senpai-it.com/articles.php?id=1
Siarhei Shandrokha (CTO, Senpai IT Solutions)
siarhei@senpai-it.com
_________________________________________________
http://www.airsole.net
elevator shoes
Turn any shoes into height increase elevator shoes.
__________________________________________________
Contemporary Chinese Wedding Invitation
Custom Wedding Invitations
Wedding Invitation Design
Free Wedding Invitation
Personalized and Unique Wedding Invitations
http://www.983wedding.com
__________________________________________________
http://www.diet-article.com
__________________________________________________
Acid Reflux - http://www.mandarinconsulting.com - lejovchina, on 02/27/2008, -0/+1Damn spammers.
Digg is coming to a city (and computer) near you! Check out all the details on our 
© Digg Inc. 2008 —
Content posted by