Jack of all trades, master of some…

Archive for April, 2008

Ive just started playing with the power that is Jquery and came up with this nice use for the Ajax functionality in Jquery.

You want to put your email address on your web site so people can contact you, but don’t want to put a mailto: anchor in the html, because it will be spidered and added to some morons Spam list.

Here is a simple and server independent solution:

Firstly, create a file on your site, it doesn’t have to have a html extension, e.g. email.me
In the content of the file, add the html snippet that you would like to display to the user as your email address (usually an anchor tag with a mailto: href). This is the html that will be inserted into your web page when the user clicks on the Show email address text.

e.g.

<a href="mailto:someone@somewhere">someone@somewhere</a>

In your web pages, where you wish someone to be able to see your email address by clicking, enter a span with a class of email.

<span class="email">Click to see email</span>

in the ready function for your document enter the following:

$('.email').click(function(el){
    $(this).hide().load('email.me').fadeIn(1000);
});

This will add a click function to all elements assigned the email class, that when clicked, will replace the current content with the content of the email.me file (faded in ). In this case your email mailto anchor. This principle can be used to display any content. Maybe you want to hide the comment form for your blog, until a display has been clicked, give it a try.