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!
![Page Visibility API]()
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![Optimize Your Links For Print Using CSS — Show The URL]()
When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts...
![New York Times-Style Text Selection Widget Using MooTools or jQuery]()
Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time's text selection widget. NYT's text selection widget listens for text selection and presents the user with a "search" icon...
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 :)