11
Sep
2008
We all know some clients want their emails on their websites.
Our scenario scene begins in the middle of an email conversation:
> Open scene
Us: "What about a contact form?"
Client: "No. I want people to be able to click on it and open up outlook."
Us: "But some users may not have outlook. what if the user users gmail for example?"
Client: "Well I just want my email on there." "well then ok."
> End scene
So although we would try to persuade our clients not to list e-mails on the site, the old saying goes, "the client is always right."
Well maybe with this little script, we can possibly come to an arrangement and help prevent this spamtrocity (Yes, I just made this word up) from occurring. I used jQuery to do the magic and I offered two different pieces, because to be honest, I just wanted to.
See it live
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
// First type see comment for example #1
el = $('#email_one');
el.each(function(){
el.attr('href','mailto:' + el.attr('href').replace('|','@').replace('/','').replace(':','.'));
el.attr('title',el.attr('href').replace('|','@').replace('/','').replace(':','.').replace('mailto.','Email: '));
});
// Second type see comment for example #2
$('#email_two').html('<a href="mailto:'+$('#email_two').html().replace('|','@').replace('/','').replace(':','.')+'" title="Email: '+$('#email_two').html().replace('|','@').replace('/','')+'">'+$('#email_two').html().replace('|','[at]').replace('/','')+'</a>');
});
</script>
</head>
<body>
<p>Example 1</p>
<!-- Example 1 :: Just a simple link with the class of email -->
<a href="/yourname|yourcompany:com" id="email_one" title="email me">safer email link</a>
<br/><br/><br/>
<p>Example 2</p>
<!-- Example 2 :: Inside a span with jut some simple info that will get converted to the email -->
<span id="email_two">/yourname2|yourcompany2:net</span>
</body>
</html>
