Stylesheet To Change Based On The Time Of Day?

[katgal]

I'm working on a redesign of my site, and I want the stylesheet to change based on the time of day (sunrise, morning, noon, afternoon, etc.). I swear I saw something about this online somewhere...but I can't seem to find it. I can find many tutorials on changing the stylesheet based on month or day, but not by hour. I want to change the styles based on the hour of the day.

 

I've been searching the web ALL day, and I haven't found anything useful. It's driving me nuts.

 

Does anyone know how I'd go about doing something like that? Or recommend another forum where I might get some advice?? I'm not a pro at php or javascript, so I'm ideally looking for a good tutorial or some code into which I can easily plug in my own variables.

 

In case you're curious, the VERY preliminary design is here: http://www.katgal.com/tree. Note the "available stylesheets" in the left column. Again, the design is very rough. I know there are a lot of things out of whack.

[TCH-Don]

This site may give you ideas

http://sonspring.com/journal/time-sensitive-css

[katgal]

This site may give you ideas

http://sonspring.com/journal/time-sensitive-css

 

I saw that post earlier today and got very excited! Downloaded the demo, and it would work...except that it calls the SERVER time. I need it to be triggered by the local machine time. I think that means I need to use javascript. Now knowing that I need to use javascript and actually knowing how to write such a script are two totally different issues!

 

I'm still searching....

[Jeren]

I've not found much that might help, though just having it work via server time for now would still be pretty neat.

[katgal]

I've not found much that might help, though just having it work via server time for now would still be pretty neat.

 

If I was just using random styles/colors, yes... But my stylesheets are time of day dependent (sunrise, sunset, twilight, etc), so it wouldn't make sense. And yes, I need things to make sense. lol

 

In another forum, someone suggested using:

 

timestamp = new Date();

var Hours;

Hours = timestamp.getHours();

if (Hours => 0 && Hours <=4 ) {

setActiveStyleSheet("sunset");

}

 

if (Hours >= 5 && Hours <=8 ) {

setActiveStyleSheet("sunrise");

}

 

The setActiveStyleSheet is from my styleswitcher script. But as of yet I've been unable to successfully implement the code. I just don't know enough javascript, I fear. I'm thinking of going back and begging him to do it for me.

[Jeren]

Why not just do it with PHP? I don't know how the code would work exactly, but the logic would go as follows:

 

Check server time for the time of day.

Based on the time of day (using if/else or a switch statement), output a certain CSS file into the header.

 

Instead of loading them all into the header and just activating one, I would say to choose which one to print to the header.

 

Now my try at the code (which would work off of server time. Perhaps you could use a JS function to get their local time and append this?).

 

><?php
$hourtime = time('h');
if ($hourtime >0 && $hourtime < 4)
echo '<link rel="stylesheet" type="text/css" href="whatever.css"/>';
elseif($hourtime >=4 && $hourtime < 8)
echo '<link rel="stylesheet" type="text/css" href="another.css"/>';

// Etc
?>

 

I've not tried this before, but something along those lines corresponds with the ideas that I had above (which you seemed to misunderstand based on your reply). This isn't random, sorry.

[katgal]

Thank you all for your help. I believe I have figured it out (thanks to one of our web programmers at work). Still testing, but seems to be working. I'll post a link a little later, so you guys can kick the tires for me.

 

p.s. Jeren, What I was trying to say, was that it would APPEAR random to folks outside the Server's time zone. Folks in Europe would get sunset at 10 am, for example. Since my visitors are from all over the world, I want them each to have the same experience.

[Jeren]

Ah, now I understand. And yes, unfortunately with that, you'd have differences with regards to their local time. If you could get their time zone setting, though, then you could have the PHP code calculate the offset. As stated before, asking them for it once and storing it as a cookie could be a temporary solution to that. And it would allow them to have it displayed for their local time.

 

I don't know enough about JS to try and get their local time automatically, so that is probably how I would do it. I don't think I can help you much beyond that. Sorry.

[katgal]

I just published a post at my site, detailing how I ultimately got my stylesheets to change based on the hour of the day.

 

Click here to read all about it.

[TCH-Don]

Looks good

 

Thanks for the update.

[TCH-Bruce]

Glad you found a solution. Very nice.

 

If the user has Javascript turned off you should be able to use:

 

><noscript>
<link rel.........>
</noscript>

[BoxersRule]

WOW!

 

That is SO cool!

 

Pardon my ignorance, but is that a skin that can be used on a forum such as TCH or..... um.... my IPB forum?

 

Congrats on getting it figured out!

[katgal]

Glad you found a solution. Very nice.

 

If the user has Javascript turned off you should be able to use:

 

><noscript>
<link rel.........>
</noscript>

 

Duh! I didn't event think of that. I'll give that a try. Thanks for the tip.

 

WOW!

 

That is SO cool!

 

Pardon my ignorance, but is that a skin that can be used on a forum such as TCH or..... um.... my IPB forum?

 

Congrats on getting it figured out!

 

By "skin" do you mean the actual design (tree, colors, etc...) or the CONCEPT/code? The former, no. The latter, absolutely.

[TCH-Bruce]

Glad I could help.

 

I use the

[carbonize]

>var css = '<';  css+='link rel="stylesheet" href=' + display + ' \/';  css+='>';

 

That strikes me as a bit much. This should work just as well

 

>var css = '<link rel="stylesheet" href="' + display + '">';

[Jeren]

Congrats! It's looking good, too!

[carbonize]

I just noticed that if the time is between 0000 and 0359 you have it set to use tree_sunset.css but wouldn't tree_twilight.css be a better choice ?

 

BTW it works fine here in Firefox but is getting messed up in IE6. Might just be the works machine though.

Edited March 8, 2007 by carbonize

[katgal]

I just noticed that if the time is between 0000 and 0359 you have it set to use tree_sunset.css but wouldn't tree_twilight.css be a better choice ?

 

That was not intentional. Thanks for catching that. left off an "if" there....

 

BTW it works fine here in Firefox but is getting messed up in IE6. Might just be the works machine though.

 

I ran it through http://www.browsershots.org and it appears to display correctly across all major browsers. But let me run it through again. I may have tweaked something that IE 6 didn't like.

[TCH-Thomas]

I took the liberty to correct a typo in the browsershots link. Nice link by the way.

[carbonize]

You didn't have to add another else if just editing the final else would of dealt with midnight till 0400.