Blog.adambard.com

Hello Googler

It is and always has been the popular thing to publish, um, very opinionated articles in blogs. I’m going to leave this up, but since this is the most-found page on this now-defunct blog (Although I still post from time to time at http://posterous.adambard.com/), I should say this: What follows is very bad advice.

If you ever need a hook to grab a link, just use a css class for god’s sake; jQuery et. al. make this ridiculously easy, and it was never that hard to begin with. Rel has a real meaning, if a generally-unused one, and there’s no sense using it when you really mean to use a class.

Carry on then. The rest of this post is the original in its entirity.

In HTML, <a> and <link> elements have a unique attribute, “rel.” Rel has practically no use in plain HTML these days, but with some creativity it can be an excellent hook for javascript events. This will provide you an unobtrusive way to change the behavior of these elements, without requiring “javascript:” links or onclick calls be written directly into the html.

Implementation:

var getElemsByRel = function(rel){
    aElements = document.getElementsByTagName("a");
    relElems = [];
    for (i = 0; i < aElements.length; i++) {
        if (aElements[i].hasAttribute("rel") && aElements[i].rel == rel) {
            relElems.append(aElements[i]);
        }
    }
	return relElems;
}

Case Study

Lightbox.js uses this to great effect: Any links with rel=”lightbox” activate the script, causing the image display to pop up with the target of the link as the image to display.

To accomplish this is very simple; for each element with the target rel attribute, one adds an onclick attribute that calls the function of one’s choosing, and – importantly – returns false, so that the link is not followed. As an added bonus, this technique fails extremely gracefully; if the javascript isn’t executed, the link is followed and the image is simply displayed in the browser.

Using rel in this case solves the problems of storing some relevant information in the link, forgoing the insertion of javascript into the markup, and providing some sort of semantic information in the markup as well.

This entry was posted on Sunday, June 1st, 2008 at 3:21 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.