Japh » HTML

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.

A shell for your HTML

Japh — Sun, 23 Sep 2007 13:53:35 +0000

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

My First HTML Page

This is the first paragraph on the page.

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.

Now I’ll explain what it all means!

The first line tells the user’s browser some basic information about how to treat the code it finds in the document. It’s HTML, in fact, it says that it’s XHTML 1.0 Transitional. At this point, that won’t mean much to you, and it also won’t really matter to you. Essentially, the internet is currently transitioning from using HTML, to using XML for defining or describing the structure of a web page. So if you’re interested in reading more about XHTML, check out Wikipedia.

The next line is the opening html tag. Everything on your page should be placed within your opening and closing html tags.

Within your html tags, you should have a set of head tags, and a set of body tags. Everything on your page should be within one of these two. Content between the body tags, and various other things that we’ll get to later, between the head tags.

Two things we can see here already in the head tags, are a meta tag, and a title tag. Meta tags have a number of different uses. This particular one is defining the character set to be used on the page (UTF-8 in this case), you can also use them to define keywords for search engines and things like that.

The title tag defines what will appear in the user’s title bar on their browser. For example, on this page if you look up in the title bar of your browser, you’ll see it says “Japheth Thomson”, possibly followed by some arrows and some other text (depending how you got to this article).

For now, you can just copy and paste the code above into a new text file, save it as template.html, and then open it in a browser to see what happens.

You should get a blank white page, with the words “Untitled Document” in your title bar. Once you’ve got that working fine, try having a play with inserting paragraph tags as I talked about in my previous post to see what happens.

As an example, you should end up with something like this:

My First HTML Page

This is paragraph number on this HTML page.

This is the second paragraph. It's a bit longer than the first so that if you resize your window at all, you'll be able to see the text wrapping and maintaining the paragraph spacing above and below it.

No related posts.

Starting at the beginning

Japh — Sat, 22 Sep 2007 13:36:34 +0000

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?

Well you’ve probably done a bit of Googling already and found that HTML stands for HyperText Markup Language… but what does that even mean?

Basically, it’s text that describes the structure of text (we use Cascading Style Sheets to describe the formatting of text, but we’ll get to that in another post).

HTML is a collection of “tags” that you put around the text you want it to describe.

Each tag generally has an opening tag which looks like:

and a closing tag, which looks like:

For example, if you want your text to be in a paragraph, you use the P tag, like this:

This is the text that will appear on the page in a paragraph.

There are some exceptions to this, like the line-break tag and the horizontal rule tag. These are done like this:

In my next post, I’ll show you the basic structure of an HTML page, and you can put some of this into action to see what I mean.

No related posts.