3

I have a page which contains profiles of various members of a company and these profiles also contain emails addresses. I'm hiding the email addresses with a jQuery script I found. The page displays only a picture, name and a 'view profile' link for each person and i'm using the 'Colorbox' http://www.jacklmoore.com/colorbox jQuery plugin to display the profile content on the more info link. http://www.davidatkinson.com/ipb/site/about_us/the_team/index.htm (the site is still very much in progress, so only the first row of profiles contains emails.

The problem I have is with the email jQuery. It's displaying ALL the emails together inline as one long link instead of displaying each person's email address with each DIV call.

Can anyone help? Or does anyone have any better solutions at obfuscating multiple email address on a single page?

The script for hiding the email is:

$(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();
});

The 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>

Thanks in advance :)

Frasier013
  • 301
  • 1
  • 3
  • 10

1 Answers1

2

If I have guaged what you are trying to do try replacing your jQuery function with the following:

$(function(){
    $("a.mailme").each(function() {
        var $emailAddress = $(this).html();
        $emailAddress = $emailAddress.replace(" at ", "@").replace(" dot ", ".");
        $(this).html($emailAddress);
        $(this).attr("href", "mailto:"+$emailAddress);
    });
});​

I have also setup a JSFiddle, so you can have a play with it.

Let me know if it is what you are looking for.

Adam Stacey
  • 2,833
  • 4
  • 26
  • 38
  • There are also some good options discussed in a previous Stack Overflow [question](http://stackoverflow.com/questions/699185/good-non-intrusive-anti-spam-email-obfuscator). – Adam Stacey Apr 05 '12 at 13:27
  • Adam, thank you so much :) As you know it's Easter Weekend so i'm not in the office now until next week but i'll have a fiddle with it then. I just visited your site and read about you spending more time with the family, so I really appreciate you taking the time to help out. Thanks fella and have a nice Easter. – Frasier013 Apr 05 '12 at 16:46
  • 1
    Adam, hope you had a great Easter. Just a quick thank you for your help. Works a treat :) – Frasier013 Apr 10 '12 at 07:19