Time-sensitive CSS

Japh — Tue, 31 Mar 2009 09:18:28 +0000

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 section with the following line:

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  to insert in the 
    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.

Japh » Cascading Stylesheets

Time-sensitive CSS