A butterfly beneath the glass

With a new design and a new resolve, I head out for the brave new world. The design is not the fantastically awe-inspiring concept I frequently quest after, but it sufficiently cleaves this site away from the “Kubrick” standard theme.

To kick things off I’ll start with a tiny bit of [Java|DOM]Script I wrote nigh-on 5 minutes ago for making off-site links have an icon next to them. I have no idea whether I’ll actually keep this condensed piece of awesome, though it may be useful to some people and perhaps small rodents.

First thing is to setup a CSS class for your offsite links:

a.offsite {
background: url(images/icon-offsite.gif) no-repeat right center;
padding-right: 16px;
 }

Nothing particularly taxing about this. Next is the tiny chunk of script that grabs the page section you want to work with (so you don’t go flaggin up menus and whatnot), iterates through all the links in that section and assigns a class to any link which does (or doesn’t in this case) match the specified criteria.

doOffsiteLinks = function() {
if(document.getElementById && document.getElementsByTagName) {
contentArea = document.getElementById("content");

if(contentArea) {
ahrefs = contentArea.getElementsByTagName("a");

for(i = 0; i < ahrefs.length; i++) { if(ahrefs[i].href.match(/^http[s]?\:\/\//) && !ahrefs[i].href.match(/chaostangent\.com/)) {
ahrefs[i].className += " offsite";
}
}
}
}
window.onload = doOffsiteLinks;So from top to bottom:

1. A check for browser compatability, older browsers are quietly ignored
2. The document node with the ID of “content” is grabbed
3. Grab and iterate through the list of link (“a”) tags
4. Assign the “offsite” class depending on the result of pattern matching

The pattern-matching is where the magic happens. The first pattern matches against “http://” or “https://” at the start of the link while the second (optional) pattern states that if it has “chaostangent.com” in it, treat it as relative. More than likely these two could be merged into one regex but this way is simpler and makes it more readable. The second pattern match could be omitted for people without subdomains but applications like WordPress tend to go a bit crazy with their direct links (rather than relative ones).
With something as simple as this you really can tailor it to your own purposes. So you could match against “mailto:” links with a class (with a cunningly placed envelope icon) or FTP links. For me, this really was just “proof of concept” which is evident due to its brevity.