Email Protection with MooTools JavaScript v2
Earlier this week I posted an article describing how you can protect your email links from spambots using MooTools. After some suggestions, I've made some improvements to my system.
The XHTML
<span rel="david|davidwalsh.name" class="email custom-class">Email me!</span>
I've switched to using a span tag instead of an anchor to prevent search engines from seeing dead links. We put the modified email address in the rel attribute.
The MooTools JavaScript
window.addEvent('domready', function() {
$$('.email').each(function(el) {
var anchor = new Element('a', {
href: 'mailto:' + el.get('rel').replace('|','@'),
'class': el.get('class'),
'text': el.get('text')
}).replaces(el);
});
});
I create an anchor element and replace the span element that was originally there.
Thank you to everyone that shared their ideas -- we came up with a better script!
![9 More Mind-Blowing WebGL Demos]()
With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities. I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...
![CSS 3D Folding Animation]()
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
![Checkbox Filtering Using MooTools ElementFilter]()
When I first wrote MooTools ElementFilter, I didn't think much of it. Fast forward eight months later and I've realized I've used the plugin a billion times. Hell, even one of the "big 3" search engines is using it for their maps application.
![Add Site Screenshots for External Links Using MooTools Tooltips]()
Before you send your user to an unknown external website, why not provide them a screenshot of the site via a tooltip so they may preview the upcoming page? Here's how you can do just that using MooTools.
The MooTools JavaScript
The first step is to grab...
This version is way cleaner, I assume I can change the pipe to any weirdo special character like �r5981327r0981; then do the replace?
Have you tested how effective is it against spam yet?
If it picks up any spam at all, I guess the next step would be to add in ROT13 to your approach.
Internet explorer 7 doesn’t like the “,” after ‘class’: el.get(‘class’)
That throws an error…
I tried to use this but my Browser does nothing if I click on the E-Mail me text.
@Birke: Works for me.
I had to add ‘text’: el.get(‘text’) to the new anchor element to be able to show the “Email Me” text.
@Wes: Good catch — updated that and compatibility with MooTools 1.3 (removed $each).
Thanks! The only thing i did different was to use title instead of rel. rel isn’t valid in a span.
Greetings,
I am new to mootools and I would like to know were I put the java script code for this?
Thanks for any help.
Perhaps this might help some. For strict xhtml validation if possible use the id attribute and not rel and use a – in replace if |. Making these changes will allow proper validation on strict xhtml.
Tim
BTW I figured out were to put the code :)
Perhaps this might help some. For strict xhtml validation if possible use the id attribute and not rel and use a – in replace of |. Making these changes will allow proper validation on strict xhtml.
Tim
BTW I figured out were to put the code :)