96 Comments
- 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.
- dhenderson, on 10/12/2007, -0/+23A front page story for an if statement...
- 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.
- 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); - resplence, on 10/12/2007, -7/+24Tacky.
- 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.
- GrendelT, on 10/12/2007, -3/+16"Sounds easy enough, right?"
Yep, sounds easy enough. - 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.
- 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.
- 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 - 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) - Terrin, on 10/12/2007, -14/+25Nifty
- 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) - inactive, 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.
- 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.
- resplence, on 10/12/2007, -1/+7Interesting website you run there.
- 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?
- tybris, on 10/12/2007, -0/+6Would be kind of cool if it was continuous.
- 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. - 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. - kenman345, on 10/12/2007, -0/+5i love a good geekout on digg. thanks for all the cool ideas
- 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.
- 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..
- 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. - 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.
- 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)
- 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.
- 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) - 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...
- 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. - 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. - lejovchina, on 02/27/2008, -0/+1Damn spammers.
- krinthekuz, on 09/16/2008, -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? - inactive, 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?
- 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.
- darlyn, on 10/12/2007, -0/+1Lol this is good ... I have some of the coding knowledge. but wish I had the creative will ...
- krinthekuz, on 09/16/2008, -0/+1owned (digg fubar's it a little)
http://www.loveart.nl/?color=889900%22%3E%3Cp%3Eowned%3C/p%3E - GLSmyth, on 10/12/2007, -0/+1Interesting information.
- Stormen, on 10/12/2007, -0/+1Now the only thing we need is CSS switching by the SECOND! Anybody up for the challenge? ;)
- 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?
- 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 - blueigloo, on 10/12/2007, -0/+1Awesome, the last comment on your blog post is by your MOM! :D
- 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
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. - 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. - echo2501, on 10/12/2007, -0/+1Hey, everyone else is doing it.
Change CSS on the fly:
http://www.digitalbonsai.com/change_css.php - 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. -
Show 51 - 87 of 87 discussions



What is Digg?
Browsing Digg on your phone just got easier with our enhancements to the