Encapsulating e-mails for usability and spam protection
Tuesday 26 October 2010 1:15:03 am
Step 2 : Adding usability using jQuery
Enabling jQuery at an eZPublish project can be done by activating the eZ JS Core certified extension as you would with any extension in eZ Publish. For more information, see http://doc.ez.no/Extensions/eZ-JS-Core/. You could also add the jQuery JS code in your pagelayout (visit www.jquery.com).
The jQuery code that deals with the <div> is:
<script type="text/javascript">
$(function(){
//scrambles mails with [@] and [punto]
var spt = $('div#mail');
var at = " [@] ";
var dot =" [punto] ";
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();
});
</script>You can also add within the js code some eZ code that fetches from the template.ini the values of EmailDotText and EmailAtText so whenever you change the definition at the .ini the jQuery works as well.
Once the jQuery runs you get a nicer and understandable e-mail "myname@domain.com" at the frontend site with its own “mailto” once you hover over the link, but this time crawlers will not see it at all as the code is not understandable for them, as for users they will get the well-known e-mail addresses sequence as it should always be.