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!
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![CSS Animations Between Media Queries]()
CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...
![Full Width Textareas]()
Working with textarea widths can be painful if you want the textarea to span 100% width. Why painful? Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least. Luckily...
![Build a Toggling Announcement Slider Using MooTools 1.2]()
A few of my customer have asked for me to create a subtle but dynamic (...I know...) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick...
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 :)