Dev Tips | Become a Better Developer, One Tip at a Time.

Link Nudge jQuery Plugin

I think it was David Walsh who first showed me the idea of link nudging using jQuery. You can see on the sidebar we also use this technique. I haven't seen a plugin made to do this yet (as it is really simple) so I figured this would be perfect for a quick jQuery plugin tutorial. You can download the plugin and/or view the demo below.

View Demo

Authors Note:This plugin has now been given the name of NudgeIt and has had a lot of new features added! Please see the two updates at the bottom of this page for more information.

The Plugin Javascript

Creating the plugin is simple and is as easy as creating any other jQuery plugin. I'll try to comment the source code some so you can get an idea of how it all works.

jQuery Link Nudge Plugin
Posted by DrewDouglass on August 5th, 2009
Plugin Source.

Usage

$(function(){
		$('ul li:even').linkNudge({
			elapseTime: 500
		}).css('list-style-type', 'circle');//Plugin allows for chaining, as seen with the css call.
	});

Documentation

To use the plugin, simply include the plugin and jQuery library on your page and make a call to the linkNudge function. You can include three optional parameters, as discussed below.

1. padding - Allows you to set how far the link should be nudged. Defaults to 20px.
2. elapseTime - The time, in milliseconds, over which the nudge should occur. Default to 300.
3. returnPadding - Optional padding to return to when the element is no longer being hovered. Defaults to 0.

Terms of Use

You can't sell it. Otherwise, use it how you would like in your projects, a credit to this page in the notes or documentation would be appreciated. Donations even more so.

View Demo

jQuery Link Nudge Plugin (313) -

Feed Me

If you have used or enjoy this plugin, I urge you to consider making a small donation so I can buy some Chinese food.




Update:

David Walsh has modified the flexibility of the plugin in a new post on his blog. I encourage all of you to give it a look and download and see how they differ. You can find Davids plugin on his website. Thanks for adding on to and improving the plugin David!

Update Two!

David and I have decided to collaborate on this plugin and host it on a GitHub so everyone can easily keep track of any updates or changes. We are now also calling the plugin, quite appropriately, NudgeIt.




If you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!

Article Sponsored by:

Do you like teh codez? So do we, and that's why you should add us to your watchlist on Snipplr. You'll get to keep up with all of the latest code snippets and scripts that we post.



Digg | Del.icio.us | Stumble | Reddit