Posted on : 31-03-2009 | By : Japh
Have you ever wanted to load a specific stylesheet depending on what time it is? It is actually very easy to do!
I’m using jQuery in this just because it makes it look a little simpler, it’s not much more complex to do without jQuery… but let’s face it, you’re probably already using jQuery anyway, so why not 
Make yourself a new file to put your javascript into, I’ve called mine “script.js”. Include the new javascript file by putting this line in your HTML <head></head> section with the following line:
<script type="text/javascript" src="script.js"></script> |
Now open your “script.js” file, and put the following lump of code into it:
// This line depends on jQuery, and tells the browser to kick off this stuff once // everything's fully loaded $(document).ready(function () { // These two lines make set a Date variable with the current date and time var currentDate = new Date(); var currentHour = currentDate.getHours(); // Here we're creating a new <link /> to insert in the <head></head> var newCSS = document.createElement('link'); newCSS.type = 'text/css'; newCSS.rel = 'stylesheet'; // This is where you can determine when to use which stylesheet. // If the current hour is before 9am or 8pm (or later), use "night.css" if (currentHour < 9 || currentHour >= 20) { newCSS.href = 'css/night.css'; } // Otherwise, use "day.css" else { newCSS.href = 'css/day.css'; } // This line actually does the deed, and attaches the selected stylesheet $("head").append(newCSS); // This line isn't necessary, it's just showing the actual time in the demo. $(".satellite").html(currentDate.toTimeString()); }); |
Read the commenting to understand what’s actually going on there, but that should do it! Easier than you thought, I bet 
If you have any questions or suggestions, leave a comment!
No related posts.
This is really cool. Now to think of something I can use it on…
Thanks!
Pretty cool! If you were using this as an integral part of the site (such as changing theme for night/day) then I would go with PHP myself as it can’t be turned off by the user.
Thanks for your comment, Jack!
The reason I would use javascript is so it was dependant on the user’s time of day. Using PHP would depend on server time, and so wouldn’t be quite as effective. I would certainly recommend that someone use a kind of default theme with this technique though, so the site still looked good to those with javascript disabled.
Good shout forgot that one. Hmm.
I’m actually with Jack. You could use an IP lookup to figure out (roughly) where the user is and use that to set their time.
I like the demo, though. Maybe you could make a version which let’s you fake a different time of day, to illustrate.
Yes, while you _could_ do it with PHP, I think a javascript solution is more sensible
I might make the demo adjustable at some stage actually, great suggestion!
Hi there Japh,
Finally I’ve found out what I was looking right on this page.
Anyway, I’m getting headaches trying to make your script working on Wordpress. I’ve tried to change the $ with jQuery but in both cases the Firefox console tells me that $ or jQuery are not defined.
I’ve put the code in the “header.php” file like this:
<meta http-equiv="Content-Type" content="; charset=" />
Tag Archive forarchive
Search forat
<meta http-equiv="Content-Type" content="text/html; charset=" />
<meta name="generator" content="WordPress " />
<link rel="stylesheet" href="" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title=" RSS Feed" href="" />
<link rel="pingback" href="" />
<script src="/script.js" type="text/javascript">
<a href="/">
Do you have any suggestion on how may I get this script working?
Thanks you in advance for any help,
Luca
Such a cool piece of code – will have to have a play with this!