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!
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![Create a Sheen Logo Effect with CSS]()
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
![CSS Fixed Positioning]()
When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need.
The CSS
Above we set our element 2% from both the top and right hand side of the...
![MooTools 1.2 Tooltips: Customize Your Tips]()
I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...
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 :)