Different Stylesheet Pending the Time of Day
<script>
<!--
function getStylesheet() {
var currentTime = new Date().getHours();
if (0 <= currentTime&¤tTime < 5) {
document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
}
if (5 <= currentTime&¤tTime < 11) {
document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
}
if (11 <= currentTime&¤tTime < 16) {
document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
}
if (16 <= currentTime&¤tTime < 22) {
document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
}
if (22 <= currentTime&¤tTime <= 24) {
document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
}
}
getStylesheet();
-->
</script>
<noscript><link href="main.css" rel="stylesheet"></noscript>Name your css files accordingly: night.css, day.css, etc... One cool bonus is that since JavaScript gets the time from the local machine instead of from the server, users will be served the time-based stylesheet based on their time, not the server's, which may be in a completely different timezone.
If JavaScript is disabled in the browser, it will default to the main.css stylesheet.
depending not pending.
but very useful
Correct me if I’m wrong, but wouldn’t using PHP be much more appropriate, since the browser would not have to load the code from the server? Besides, it would hide the code from the user, preserving the magic!
Using php is only useful if you want to use the server’s time. PHP cannot get the user’s time because the browser doesn’t send information that way. If you want to base your instances off the user’s time, you have to use a client side script rather than a server side.
(Makes sense if you think about it, the server side lang date object would return the server’s date/time, while the client side lang date object would return the client’s date/time)
could you also do this with Resolution. like depending on the resolution use this stylesheet, instead of This. ?
Are you talking about CSS media queries?
If somebody is on the website during the change, will the whole css, as well as the new pictures (in the new css) have to load? Because that might not look too nice.
Very useful indeed. I generally have an option for the user to choose their desired css when logged in but this could be very nice to have included. Thanks!
Hi, great little script. However, I want to add a class to the body as well using
It’s adding the stylesheet, just not the class on body – any ideas?
**BUMP**! Any ideas on the above? Would be amazingly helpful to a few people I’d imagine.
Thanks
@Easy Webs, my guess is your script is executing before the body tag has loaded, so jQuery can’t find it. You need to wrap that code in a document ready, or run it at the bottom of the page.
Hi Travis,
Yes, that worked perfectly – it was the fact it just couldn’t find the body tag. I must have picked up some bad advice elsewhere that to get this to execute immediately, I could dispense with the document .ready…but it it needs this to find the element on the page!
Thanks a million, now I can swap the stylesheet and do some class specific stuff depending on the time of day…sweeeet.
Paul
This is very great. I will definitely use this for my next project
This is great and very helpful, but I have a question: How would I make it so the time changes on the half hour? I want the time to change at 5:30pm, but with this all I can do is 5pm or 6pm.
In addition it would be great if each stylesheet could be triggered manually as well and store the choice in a cookie which would expire after a session. Would it make sense to put each document.write into it’s own function that then can then be triggered with a button on the website and of course within the if-clause. How would that look? Somebody an idea? I am only a designer and not a programmer enough to get this right …
found this manual switcher ( http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/ ) … Can the 2 approaches be combined resulting in a very useful script that chooses the stylesheet automatically based on the time of the day – but allows to overwrite the automatic choice manually by choosing a stylesheet (i.e via a dropdown menu) on the website and storing that choice in a cookie for the duration of the browser session?! That would be awesome!
@ Matt Havoc …
How about calculating the minute of the day? Supposedly a day has 1440 minutes.
Can someone check this code – would this work?
oops … typo
would be
as well of course … ;)
@wolf: Thank you so much, that did exactly what I needed it to do it. You rock!
@Matt Havoc – You are welcome. Glad it worked …
Love you man :) Thanks for this!
I want to do that if you are logged in then .css should not be as of earlier. Because i want to hide some admin options from visitor and to show only to admin as I have coded those options at the same time. So if you people have any idea to do this with php or JS or with css only. Then please solve it.
Does anyone know of a way of doing this based on the date instead of time.
For example during december 20-25th you could display “christmas.css” then switch to “newyears.css” for the following week etc… this would be a great way of adding seasonal elements without needing to be on top of things all the time.
It seems to me that the code box is empty? Anyone else noticing this?