JQuery for Web Designers - Part 1

I'm a bit funny when it comes to semantic markup. I really don't like putting visual cues into the markup that I may want to change later. You know those little symbols that we put at the end or beginning of a sentence, that we sometimes no longer use as literary symbols.

As an example, when I'm creating a form it pains me that I have to embed a colon into the markup at the end of the label text. We know why we do this, so that our input box has some kind of “stop” before it, making the view to the user just that little bit cleaner and easier on the eye. Then of course the client asks us if we can change the colon to a hyphen or a comma and we huff and puff because we've embedded these visual cues into the mark-up of all of our pages and doing a search and replace on a colon in an entire site can be a bit hit and miss at the best of times.

CSS to the rescue?

Those thoughtful folks from the W3C have given us the lovely pseudo classes of “:before” and “:after” that we can use to append or prepend content before or after an element. But as you may know these really useful tools are not featured in Internet Explorer. So what next?

Let's try JavaScript?

Nope, I'm a designer, I don't get it, its ugly, its not accessible, bad for usability and it'll bloat my page. Hmm OK.

Mythical widget

Let's pretend for a minute that there's this mythical widget thingy, that we can put into our mark-up and it'll do all sorts of clever things in a very easy manner without us having to be a programming whizz and it won't damage our nice clean mark up. Let's also assume that our mythical widget thingy looks like this

<script type="text/javascript" src="http://jquery.com/src/latest/">
</script>
<script type="text/javascript">
function FunkyStuff() {
$("dd label").append(":");
}

$(document).ready(FunkyStuff);
</script>

Ok, there's no fooling you, its not mythical. See the example here. If you look at the source of the page you can see that there is no colon in the markup.

Firstly we include the JQuery Javascript remotely purely for convenience, I wouldn't recommend doing this in a runtime environment for speed purposes (it does mean that we are always using the latest version though). Next we set up a function that looks for every label within every dd in the page and adds a colon inside the label at the end. This function doesn't do anything until the page is “ready”, which is decided by the last bit of JavaScript before we close the script tag.

What if we want to add a colon to the beginning of the element? We just use “prepend” instead of “append” like so

function FunkyStuff() {
$("dd label").prepend(":");
}

It couldn't really be any simpler and we haven't even touched our beautiful mark-up.

Of course we want this to be site wide, so we just put this Javascript into a separate file and include this in every page.

<script type="text/javascript" src="http://jquery.com/src/latest/">
</script>
<script type="text/javascript" src="scripts/myjavascript.js">
</script>

Now every page that has a dd element with a label, will get a colon stuck on the end. When our client asks to change this we can just do a very minor edit and the whole site is updated, just like it should.

The downside to this technique is that the user needs to have Javascript enabled, but that's a risk that I'm prepared to take as the majority of users do and in this case it degrades quite nicely too.

As you can see the power of JQuery is pretty phenomenal and we haven't even scratched the surface. For more information on JQuery take a look at the JQuery home.

In Part 2 we'll look at a few more examples based on this technique. How about using an image instead of a colon? Or replacing the actual label text with an image? or...?