Lately I have been doing some javascript development and I have written a couple of functions which I find really useful. I almost find the code snippets to be used on all sites I work on so I thought I would share them with you. Both the snippets are written using the jQuery library.

Opening urls in a separate window/tab in a xhtml strict environment

The target attribute is not a valid attribute in xhtml strict and your site will fail to validate if you use it, so to get around this you can use replace your target attribute with the rel attribute. Adding the rel=”external” attribute on your anchors that points to an external source and adding some javascript solves the problem.

The code here is pretty self explaining, but to describe it briefly, the javascript function must be invoked once the DOM is loaded (see code further down on the page). The function loops through all anchors that have the rel=”external” attribute and add the attribute target=”_blank”. I guess this is a bit of a hack, but it works and it keeps the clients happy

Creating spam proof mailto: anchors

It is a well known fact that if you add your email address on a site in a plain mailto anchor you will be flooded by spam after a while. You can easily avoid this by adding a little bit of javascript on your site.

It works simply by printing out the email address as plain text replacing the @ with a ” AT ” and add the email addresses in a div or which ever element you prefer and add a set class to that tag. Then you run a small snippet of javascript that find all the elements with that class, I have chosen the class name “email”. The script replaces the content in all the elements with the email class with the proper html anchor. This can not be picked up by web crawlers and it displays the links properly for the user. All browsers without javascript support / enabled will of course only see the post AT somesite.com.

Running this script would transform the code into:

Putting it all together

I have but together a simple example to illustrate the functions in action with all code and functionality. You should be able to copy this code save it as a .html file and run it in your browser.