Kristian Lunde

www.klunde.net

Archive for June, 2009

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>

Written by Kristian Lunde

June 18th, 2009 at 10:55 pm

Posted in web,web development

Tagged with , ,

On the move

without comments

I am currently switching both domain host and web host, and in that case this site might be down for a little while. I am about to replicate the site to my new web host so hopefully it will be a minimum of down time.

I have chosen to leave servetheworld.net which has been my web host since 2003, they have done a great job, but the time has now come to move to a web host which can provide me with some more advanced features.

I have chosen webfaction.com as my new web host. I chose them because they offer a multitude of different applications, for instance svn, python, ruby on rails and of course PHP. They also offer ssh access.

I chose 123-reg.com to host my domain names, that was done out of convenience, they are well known, large and hopefully know what they are doing :P

Written by Kristian Lunde

June 3rd, 2009 at 8:00 pm

Posted in Misc,web

Tagged with , ,

Get Adobe Flash player