jQuery Mailto Links Plugin: Version 1.1

Share /
Uncategorized / / 8225 Comments2008-09-10+03%3A30%3A23kevin

Another revised edition of the jQuery Mailto Plugin has arrived. This one includes in the following updates:

REGEX replacement
Updated status message
Simplified usage using a class rather than the rel attribute to target mailto: links.
Leaner code

XHTML

1	<a href="info(at)kevinleary.net" class="email">info(at)kevinleary.net</a>

JavaScript / jQuery Plugin

jQuery.fn.mailto = function() {
	return this.each(function(){
		var email = $(this).html().replace(/\s*\(.+\)\s*/, "@");
		$(this).before('<a href="mailto:' + email + '" rel="nofollow" title="Email ' + email + '">' + email + '</a>').remove();
	});
};

Simple Usage

1	$('.email').mailto();

Above is the easiest way to setup this plugin. Of course, I prefer to add a little more logic to make things more intuitive.

Advanced Usage

if ($('a.email').length > 0){
	$.getScript('/path/to/jquery.mailto.js',function(){ 
		$('a.email').mailto();
	});
}

What this does is first check to see if there are any anchor links in the document that have a class of “email”. If there are, we’ll load in the jquery.mailto.js file, and run a function once it has been loaded. This function (or callback) runs the mailto() method on all email anchors.

Why use REGEX in this version?

I’ve used REGEX in place of replace() for this version because it renders the browser message to display emails correctly. With my previous versions some users could see “you[at]domain[dot]com” in the bottom left message of their browsers. REGEX takes care of this little mishap and displays the rendered email address.

Download

jQuery Mailto Plugin (.js)

Resources

25 Comments ↓

Brad / 2.1.09 / 11:32 AM

Thanks so much for this. I wanted something that all I would have to do is copy/paste a couple lines of code and not have to worry about it. This did the trick. Thanks

kevin / 2.1.09 / 11:58 AM

I always try to make my scripts easy to implement. If there was any step that was difficult or confusing to you please let me know. Also if you think something could have been easier, or would like to have an added feature let me know and I can work it in there for you.

karl / 2.27.09 / 4:17 PM

Hi Kevin, thanks for the plugin…it looks to be really helpful, but I’m having an issue implementing it. Perhaps there’s something I’m missing, as I’m relatively new to using jquery. Here’s the dev site: http://www.coidesign.com/dev/metta/book-appointment.php. Any ideas?

karl / 2.27.09 / 4:18 PM

I’m sorry, that link is

http://www.coidesign.com/clients/metta/book-appointment.php

It just looks like the characters aren’t being replaced. What am I doing wrong? Thanks!

karl / 2.27.09 / 4:27 PM

Nevermind…I got it functioning. Thanks for the great plugin!

Adam / 6.29.09 / 2:22 PM

The download link to the JS file is broken.

kevinlearynet / 6.29.09 / 2:52 PM

Sorry about that adam, some of my WordPress uploads were pointing to an old directory, they should all be fixed now

BoonKwee / 7.18.09 / 7:39 AM

Could you post an example of how this is used for those of us that are coding challenged? Thanks!

kevinlearynet / 7.20.09 / 12:56 PM

Sure Boon, Here’s one I setup at my day job:

http://www.freshtilledsoil.com/web-resources/wp-s...