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

A shell for your HTML

0

Posted on : 23-09-2007 | By : Japh

Ok, so I promised you the basic structure of an HTML page. So here is it:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First HTML Page</title>
</head>
<body>
<p>This is the first paragraph on the page.</p>
<p>This is the second paragraph on the page, and it's a little bit longer than the first one.  Try resizing your window to make it narrower to see the text wrap but maintain the paragraph spacing.</p>
</body>
</html>

Read the rest of this entry »

Posted In: Development, HTML, PHP

Starting at the beginning

0

Posted on : 22-09-2007 | By : Japh

What better place to start than at the beginning? Because web development involves quite a lot of jargon, I figure for the first few posts, I’ll just explain what things are. That way, once we start to get into it a bit more, you’ll know what I mean if I use any jargon (I’ll try not to use too much jargon, and just terminology where appropriate!).

So you’ve heard that there’s this stuff called HTML that you use to make web pages… but what is it, and what does HTML even stand for? Read the rest of this entry »

Posted In: Development, HTML