Quick and painless Email spam protection using jQuery
Sep 11, 2008 jQuery
I recently went to one of my favorite blogs and saw that the author had posted up a neat little trick to help prevent spammers and bots from crawling your site to gain those oh so valuable emails and begin to send you and everyone else who has an email on your site - spam. It’s a spammy spam world of emails and we as programmers need to try to prevent this.
We all know some clients want their emails on their websites.
Our scenario scene begins in the middle of an email conversation:
> Open scene
Us: “What about a contact form?”
Client: “No. I want people to be able to click on it and open up outlook.”
Us: “But some users may not have outlook. what if the user users gmail for example?”
Client: “Well I just want my email on there.” “well then ok.”
> End scene
So although we would try to persuade our clients not to list e-mails on the site, the old saying goes, “the client is always right.”
Well maybe with this little script, we can possibly come to an arrangement and help prevent this spamtrocity (Yes, I just made this word up) from occurring. I used jQuery to do the magic and I offered two different pieces, because to be honest, I just wanted to.
See it live
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
<script>
$(document).ready(function(){
// First type see comment for example #1
el = $(’#email_one’);
el.each(function(){
el.attr(’href’,'mailto:’ + el.attr(’href’).replace(’|',’@').replace(’/',”).replace(’:',’.'));
el.attr(’title’,el.attr(’href’).replace(’|',’@').replace(’/',”).replace(’:',’.').replace(’mailto.’,'Email: ‘));
});
// Second type see comment for example #2
$(’#email_two’).html(’<a href=”mailto:’+$(’#email_two’).html().replace(’|',’@').replace(’/',”).replace(’:',’.')+’” title=”Email: ‘+$(’#email_two’).html().replace(’|',’@').replace(’/',”)+’”>’+$(’#email_two’).html().replace(’|',’[at]‘).replace(’/',”)+’</a>’);
});
</script>
</head>
<body>
<p>Example 1</p>
<!– Example 1 :: Just a simple link with the class of email –>
<a href=”/yourname|yourcompany:com” id=”email_one” title=”email me”>safer email link</a>
<br/><br/><br/>
<p>Example 2</p>
<!– Example 2 :: Inside a span with jut some simple info that will get converted to the email –>
<span id=”email_two”>/yourname2|yourcompany2:net</span>
</body>
</html>
Tags: spam
A useful list of JQuery Code and plugins - Part 1
Aug 18, 2008 jQuery
I guess everyone out there has a list that is used by many. a top ___ (fill in the blank) list of some resource you use. Well why not me? I compiled a list of some cool jQuery plug-ins I found that have been used in our web development here at THAT Agency.
Now without further Adou, the list:
1. Pop-ups using JQuery
Now we all love pop ups right? well in an effort to keep the actual code clean, you can use this code that was written by Richard Wong
$( document ).ready( function()
{
$("a[rel='pop-up']").click(function () {
var features = "height=700,width=800,scrollTo,resizable=1,scrollbars=1,location=0";
newwindow=window.open(this.href, 'Popup', features);
return false;
});
});
2. PDF links using JQuery
ok, so this one, I cant remember where I got it from, but its actually pretty handy when it comes to dealing with links to pdf’s.
$(document).ready(function(){
$("a[href*=.pdf]").click(function(){
$(this).attr({"target":"_self"});
return false;
});
});
3. Rounded corners using JQuery
This was actually the first plugin I tried for Jquery and I have been pretty much hooked ever since. This is just a cool easy way to create rounded corners (plus more) with just jquery. No top left, top right, bottom left, bottom right images… none of that stuff. just quick and easy.
$(function(){
// round the boxes on the Main Nav Links
$('.yourClassName').each(function()
{
$(this).corner("7px");
});
});
Tags: plugins
