Time-sensitive CSS

9

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!

View Demo

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!

Posted In: Cascading Stylesheets, Development, HTML, JavaScript

First NETTUTS Tutorial Posted!

5

Posted on : 26-02-2009 | By : Japh

I wrote my first tutorial for NETTUTS recently and it was published last night.

Title: Create a Slick Flickr Gallery with SimplePie
Description: I’ve wanted to write a tutorial for quite some time now, and APIs have always been a particular interest of mine. So with my wife’s recent foray into photography, I decided a Flickr tutorial would be first cab off the rank! Using RSS, Flickr and jQuery all together was pretty fun too.

Check it out! :)

Posted In: General Chatter, JavaScript, PHP

APIs and The Grey Album

1

Posted on : 07-01-2009 | By : Japh

Lately I’ve been playing around with a few different APIs. Getting the hang of using them and seeing what they can do. I’ve had a brief play with both the Flickr and Twitter APIs, and they’re both actually very user-friendly yet powerful.

I decided to build a simple photo album script using mostly PHP and jQuery to do the tricky parts, and the SimplePie library for actually importing the photo stream. I’ve called it The Grey Album, and though I probably wouldn’t call it a complete and comprehensive script, it seems to do the job. Any feedback is most welcome!

Posted In: Development, General Chatter, JavaScript, PHP