Jump to content

Stylesheet To Change Based On The Time Of Day?


katgal
 Share

Recommended Posts

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.

Link to comment
Share on other sites

 

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....

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by carbonize
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...