Fighting spam from inline email addresses using JQuery Plugin – Version 1.0

Posted on Mar 19, 2009 by Rich to Technology Trends, Web Development

This is a JQuery plugin I have been working on to try to eliminate; if not help, fight spam through bots and such going through websites and scraping email addresses.

Basically it works like this:  You add the emails in a certain way in your code, be it yourname^yourcompany#com or however you want to add it. Then let the plugin work its magic. The code will be shown as above, but will behave as if you had typed in yourname@yourcompany.com. Simple huh? Well here we go:

Javascript

1
2
3
4
5
6
7
8
9
10

<script>
$(document).ready(function(){
// example 1
$('a[rel*=spemail]').spemail('|,:','linkbase');
// example 2
$('#email').spemail('|,:','mailbase');
// example 3
$('#plainemail').spemail('|,:','plainbase');
});
</script>

HTML

1
2
3

<p><strong>Example 1:</strong> <a href="yourname|yourcompany:com" rel="spemail"></a></p>
<p><strong>Example 2:</strong> <span id="email">yourname|yourcompany:net</span></p>
<p><strong>Example 3:</strong> <span id="plainemail">yourname|yourcompany:net</span></p>

As you can see in the examples above, the code in the DOM, will handle specific email pieces based on their ID or rel. Try it out and see. It works well.

Check out a live example of Fighting spam from inline email addresses using JQuery

or

Download the Fighting spam from inline email addresses using JQuery Plugin – Version 1.0 source files

Tags: DOM, email, Javascript, jQuery

Internal Links with Favicon using jQuery

Posted on Mar 9, 2009 by Rich to Technology Trends, Web Development

After thinking about doing something with favicons and links, I came up with this very simple jQuery Plugin that would allow all the internal links in your website to actually have your own favicon implemented on the left side of the link.

First of course, you will need jQuery, which you can always download on the jQuery website.

Then you will need the internalFavLink plugin.

Here are some screen shots:

DOM

Add to your DOM Call

RESULTS

Shown Results

So some things I thought about before adding this to the blog.

1. What if I don’t have a favicon? Well, then either create one from an image and use this favicon creator tool from Dynamic drive, add it to your site and you will be able to use this plugin.

2. What if my favicon is a .png and not an .ico file as in the plugin? This is simple as well, just find the code in the javascript file called favicon.ico and change it to yours.

3. What if I want the favicon to be after the link? This is also simple; in the plugin javascript, just change where it says “prepend” to “append”.

The plugin is very simple. So if anyone has any ideas on how to improve please let me know.

You can also see the Internal Favicon Link jQuery Plugin in action!

Tags: DOM, favicon, internal links, Javascript, jQuery

Up and Down slider using JQuery

Posted on Feb 2, 2009 by Rich to Web Development

To tell you the truth, I wish I could remember where I originally found this example because I would like to give credit where credit is due, but I really dont remember. Anyhow, this person’s example was a cool slider effect that stuck to the top of the page. Well I decided to take that and turn into into the same basic concept; only this time coded in JQuery. Oh Yes. I love JQuery.

The examle is pretty straight forward. So if you have any comments or concerns, definitley drop me a comment and I will try my best to answer them.

Here are the screen shots:

Slider in the "Off" Position

Slider in the "On" Position

I kept the same colors and such from the other example so if anyone knows where the original was from, please let me know.

Click Here to see this example in action.

Want to download the code? Of course you do, click here.

Originally seen @ (Antonio Lupetti’s moo-tools example)

Tags: DOM, Javascript, jQuery, toggle

Developer: jQuery Foundation .js

Posted on Jan 29, 2009 by Rich to Technology Trends, Web Development

As developers we always keep our little things that we always use or start a project in the same mannerisms. Coming up later, I will write about how we lay the foundation for a project with our project template. But for now, I would like to show you how we have our jQuery foundation file layed out. Above and beyond the scope of this base file, everything past this point is decided by the individual project.

We have done many websites and somethings always seem to arise.   So I decided “Why not just have them in the base file from the beginning.”  Right? of course.

So here is the file that we use for just such a thing.

So here is “jQuery Foundation .js”

JQuery:

This has quickly become my norm when dealing with a javascript framework. It is light, flexible and above anything else, easy to learn and implement.

When I use this, I have a set of things I always place inside the code that executes on the DOM.

1. External Links

Now many people do not like to use the target=”_blank” anymore, since it’s not standard anymore. Well why not use jQuery to make it happen.

1
2
3
4
5
6
7
8
9

$('a[rel="external"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
});
// or
$('a[id="externalLink"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
});

2. PDF’s

PDFs should open up without sending the visitor flying to a new window and all sorts of shenanigans like that.

1
2
3
4

$("a[href*=.pdf]").click(function() {
		$(this).attr({"target":"_self"});
		return false;
});

3. Confirm a Click event

This was just something that I add because well, sometimes you hit a link or a button or submit something by accident right? of course! we all do. Adding this little bit of code will help you try to avoid that, or at least deal with it a little better.

1
2
3
4
5
6
7
8
9
10
11

// IN DOM
$('a[rel="confirmDelete"]').click(confirmTheClick);
// OUTSIDE DOM
function confirmTheClick()
{
	var agree="Are you sure you wish to perform this action?\nCheck your work!";
	if ( confirm( agree ) )
		return true;
	else
		return false;
}

You can also download the quick and easy jQuery Foundation  javascript file right here, so you can see it.

Do you have anything that you use? Drop us a comment we would love to see what ideas you have!

Tags: DOM, Javascript, jQuery