jQuery

I thought I’d mention for those boring enough to be interested in such things that the comma-separated list of tags under each post no longer ends with a comma. Until last weekend, the lists looked something like this:

Tags:

• monitoring
• sas
• server
• services,

Notice that last comma after “services”? Thats because in the spirit of standards compliance and platform neutrality, the list of links to tag data is marked up as a list of links. In other words, the commas aren’t hard-coded in any way. The source for the list should look like this (default MT classes and hrefs removed for simplicity):

<ul>
	<li><a href="#" rel="tag">monitoring</a></li>
	<li><a href="#" rel="tag">server</a></li>
	<li><a href="#" rel="tag">services</a></li>
</ul>

Without banging on too much, the commas are appended in the css using the li:after {content:",";} construct. The problem is, the last-child selector in most browser’s implementation of css doesn’t work so there’s no way to say “apply commas to all li tags except the last one”.

The solution is to apply a class to the last <li> in the list so you get something like this:

<ul>
	<li><a href="#" rel="tag">monitoring</a></li>
	<li><a href="#" rel="tag">server</a></li>
	<li class="last"><a href="#" rel="tag">services</a></li>
</ul>

But that is totally bogus, it dirties up what is nice simple semantic markup and what do you do with dynamically generated lists? That’s a lot of struggling and a lot of extra code.

I knew I could dynamically assign the class with javascript, or for that matter I could even dynamically assign the comma itself, getting over the fact that IE doesn’t support the :before and “:after” pseudo classes (well, IE7 might, but I haven’t checked) but I just couldn’t be bothered working out the script to do all that DOM traversal.

So yeah, this post is actually about jQuery, the write less do more javascript library.

With jQuery I can do the DOM traversal in one line of code. Here’s the code that grabs all the last <li> tags and applies the class “last” to them:

$("li:last-child").addClass('last');

Let me say that again. This is ALL the custom code I use on the page to do this. I just can’t help thinking this is wonderful. Imaging what I could do if I actually knew how to code:-)

Anyways, the library is 19k so go grab yerself a copy.

Oh, and while I’m on the subject of exactly how wonderful an extremely powerful library that fits in 19k is, check out this example. You want a groovy carousel interface to select from your application icons as part of an interface you’re designing. BUT, you also want the interface to work in text only, that is, you want the xhtml code that creates it to be standards-compliant. What do you do? I’m still trying to work it out, but the source code for the following example looks something like this:

	<div id="carousel">
		<a href="#a" title="email" rel="imagebox"><img src="images/carousel/th_bw1.jpg" width="100%" /></a>
		<a href="#b" title="contacts" rel="imagebox"><img src="images/carousel/th_bw2.jpg" width="100%" /></a>
		<a href="#c" title="calendar" rel="imagebox"><img src="images/carousel/th_bw3.jpg" width="100%" /></a>
		<a href="#d" title="sms" rel="imagebox"><img src="images/carousel/th_lights1.jpg" width="100%" /></a>
	</div>

So not entirely perfect. Not a UL which would have been nicer and no text separation between adjacent links which will cause a WAI validator to barf on the code but still, a screen-reader can deal with a bunch of links with title attributes defined so this definitely could work.

The example is over on the jQuery interface plugins site. This one is called Carousel view the demo page now

Once you’ve got that, try turning javascript off. You get a static display of images with links to each image. This is very cool from an accessibility point of view. It hints at what we can do with modern javascript libraries like jQuery to enhance our customer experiences without loosing on the disability compliance, future-proofing and ease of code maintenace that good quality semantic markup gives us.

If I find the time to properly finish that last example (I have to modify the author’s css as it currently creates superimposed images when you turn JS off which of course isn’t the idea) I’ll post it here…