Matt King's Blog!

One of the things I dislike the most about writing HTML is creating links that open in new windows. Since I try to make all my HTML standards-compliant, I can’t use the target="_blank" attribute in my links anymore, since it’s been deprecated in XHTML. Many have followed the new standard of making an inline onclick attribute of the link open the window, including myself. But what a pain it is to type it all out and remember the exact code to do it. Instead of this:

  <a href="http://www.example.com" onclick="window.open(this.href); return false;">External Link</a>

Wouldn’t it be easier to type this?

  <a href="http://www.example.com" rel="external">External Link</a>

I’m sure you’ll agree it’s much cleaner, easier to type, easier to remember, and to top it off, it’s (kind of) symantically correct. While the possible attribute values of rel do not include external, using it as a keyword to denote the relationship between an external page and your link makes sense. Best of all it validates with the W3C validator with flying colors.

How to Make it Happen

So how do we make the magic happen? The answer is with our good old friend Javascript. Basically we’re going to make a function that will crawl the document after the page loads and check for links that have rel="external" in it, then attach an Event.observe to each link that will cause it to open in a new window (note that you’ll need Prototype.js for this to work).

Here’s the code:

  function external_link(link) {
    var el = Event.element(link);
    if (el.tagName == 'IMG') {
      if (el.parentNode.tagName == 'A') {
        var el = el.parentNode;
      } else {
        return false;
      }
    }
    window.open(el.href);
    Event.stop(event);
    return false;
  }
  function init() {
    var links = $A(document.getElementsByTagName('a'));
    links.each(function(link) {
      if (link.getAttribute('rel') == 'external') {
        Event.observe(link,'click',function(e){ external_link(e); },false);
      }
    });
  }
  Event.observe(window,'load',init);

Note in the external_link function it checks if the item clicked was an image tag. If it is, then it will look up one node in the DOM tree to see if the image was enclosed in an anchor tag, and attach the event to that instead (since it contains the href it needs to open). If it doesn’t find anything, it will exit quietly.

Load this in your document header and off you go. You should be able to add rel="external" to any link on your page and it will open in a new window. Remember you need a copy of Prototype loaded as well. Leave a comment if have any questions or improvements.

In all modern browsers there is a way to get all elements that have a specific class name using Javascript. It’s really useful when manipulating elements on a page. But what if you want to get all elements that start with a certain prefix? Well there’s a way to to do by including this snippet in your Javascript files. It requires Prototype to work.

  document.getElementsByPartialClassName = function(value, parentElement) {
    var children = ($(parentElement) || document.body).getElementsByTagName('*');
    var elements = [], child;
    regexp = new RegExp('(?:^|\s)('+value+'.*?)(?:\s|$)');
    for (var i = 0, length = children.length; i < length; i++) {
      child = children[i];
      if (matches = Element.classNames(child).toString().match(regexp)) {
        elements.push(Element.extend(child));
      }
    }
    return elements;
  };

Now, you can get all of your HTML elements that, for instance, have a class name that begins with ‘comment_’:

  var els = document.getElementsByPartialClassName('comment_');

And then do something with them:

  for(var i = 0; i < els.length; i++) {
    el.style.color = '#F00';
  }

I built this function for another project I’ve been working on (which I’ll post about soon). In the project, I was looking for elements that started with a certain prefix, but had different endings (e.g. ‘comment_one’, ‘comment_two’). I used the leftover values to further manipulate the elements. Hopefully this will come in handy for other people as well. Remember you need Prototype for it to work.