Kristian Lunde

www.klunde.net

Javascript snippets

with one comment

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.

  1. <a href="http://www.klunde.net" rel="external" title="Klunde.net">Kristian Lunde</a>
  1. function externalLinks() {
  2.         $("a[rel='external']").each(function() {
  3.   $(this).attr('target', '_blank');
  4.         });
  5. };

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.

  1. <div class="email">post AT  somesite.com</div>
  1. function createMailTo() {
  2.         var c_email_field = $('.email');
  3.  if($(c_email_field).length > 0) {
  4.   $(c_email_field).each(function()
  5.   {
  6.    var email = $(this).html().replace(' AT ', '@');
  7.    $(this).html('<a href="mailto:' + email + '" rel="nofollow" title="' + email + '">' + email + '</a>');
  8.   });
  9.  };
  10. };

Running this script would transform the code into:

  1. <a href="mailto:post@somesite.com" rel="nofollow" title="post@somesite.com">post@somesite.com</a>

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.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4.   <title>Javascript snippets</title>
  5. </head>
  6. <body>
  7.  
  8. <a href="http://www.klunde.net" rel="external" title="Klunde.net">Kristian Lunde</a>
  9. <div class="email">post AT somesite.com</div>
  10.  
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  12. <script type="text/javascript">
  13.  
  14. function externalLinks() {
  15.         $("a[rel='external']").each(function() {
  16.   $(this).attr('target', '_blank');
  17.         });
  18. };
  19.  
  20. function createMailTo() {
  21.         var c_email_field = $('.email');
  22.  if($(c_email_field).length > 0) {
  23.   $(c_email_field).each(function()
  24.   {
  25.    var email = $(this).html().replace(' AT ', '@');
  26.    $(this).html('<a href="mailto:' + email + '" rel="nofollow" title="' + email + '">' + email + '</a>');
  27.   });
  28.  };
  29. };
  30.  
  31. $(function() {
  32.         externalLinks();
  33.         createMailTo();
  34. });
  35. </script>
  36. </body>
  37. </html>
Be Sociable, Share!

Written by Kristian Lunde

June 18th, 2009 at 10:55 pm

Posted in web,web development

Tagged with , ,

One Response to 'Javascript snippets'

Subscribe to comments with RSS or TrackBack to 'Javascript snippets'.

  1. To nice tricks indeed, the rel=”external” is one I’ve used in some situations myself. I don’t really think it’s a hack, as I’ve understood that it’s just the HTML-serialization of the DOM that doesn’t allow targer=”_blank”, but it is valid from a DOM-point-of-view.

    An other way to implement this could be (if _all_ other links than the internal ones should be external), to check for the hostname of the href-attribute, and check it against the hostname of the page the script is invoked on. But again this is against my own beliefs that it should be the user who should decide if the link should open in a new page/tab, and not the site. The exception can of course be for links to help-resources etc when in the process of filling out a form or going through a multi-page-order-sequence etc.

    I liked the implementation of the email-trick, as it falls back to a readable email-address if JS is not supported (long live progressive enhancement ;) ). But I do also believe that spambots are learning the alternative ways of formatting email-addresses (“AT”, “DOT” etc), but then again it should atleast filter out some of them :) .

    Michael Odden

    19 Jun 09 at 11:26:27

Leave a Reply

Get Adobe Flash player