JQuery script obfuscation email problem I am using
I have a page that contains profiles of different company members and those profiles also contain email addresses. I am hiding email addresses using a jQuery script I found. The page only displays the image, name and "view profile" link for each person, and I am using the "Colorbox" http://www.jacklmoore.com/colorbox jQuery plugin to display the profile content on an additional informational link. http://www.davidatkinson.com/ipb/site/about_us/the_team/index.htm (the site is still very advanced so only the first line of profiles contains emails.
I have a problem with jQuery email. It displays ALL emails together as one long link, rather than displaying each person's email address with each DIV call.
Can anyone please help? Or does anyone have any better solutions when obfuscating multiple email addresses on one page?
script to hide email:
$(function(){
var spt = $('a.mailme');
var at = / at /;
var dot = / dot /g;
var addr = $(spt).text().replace(at,"@").replace(dot,".");
$(spt).after('<a href="mailto:'+addr+'" title="Send an email">'+ addr +'</a>')
.hover(function(){window.status="Send a letter!";}, function(){window.status="";});
$(spt).remove();
});
HTML:
<div id="profile-tony_ingham" class="profile_wrapper">
<div class="profile_outer">
<div class="profile_inner">
<div class="profile_name">Tony Ingham</div>
<div class="job_title">Chief Executive</div>
<p>xxxxxxxxxxx</p>
<p>Email: <a class="mailme">tony.ingham at ipbcommunications dot co.uk</a></p>
</div>
</div>
</div>
<div id="profile-stewart_pimbley" class="profile_wrapper">
<div class="profile_outer">
<div class="profile_inner">
<div class="profile_name">Stewart Pimbley</div>
<div class="job_title">Managing Director</div>
<p>xxxxxxxxxxx</p>
<p>Email: <a class="mailme">stewart.pimbley at ipbcommunications dot co.uk</a></p>
</div>
</div>
</div>
<div id="profile-catherine_bellis" class="profile_wrapper">
<div class="profile_outer">
<div class="profile_inner">
<div class="profile_name">Catherine Bellis</div>
<div class="job_title">Director</div>
<p>xxxxxxxxxxx</p>
<p>Email: <a class="mailme">catherine.bellis at ipbcommunications dot co.uk</a></p>
</div>
</div>
</div>
Thank you in advance:)
source to share
If I understand what you are trying to do, replace the jQuery function like this:
$(function(){
$("a.mailme").each(function() {
var $emailAddress = $(this).html();
$emailAddress = $emailAddress.replace(" at ", "@").replace(" dot ", ".");
$(this).html($emailAddress);
$(this).attr("href", "mailto:"+$emailAddress);
});
});
I also installed a JSFiddle so you can play with it.
Let me know if this is what you are looking for.
source to share