• Demos and Downloads!
• MooTools Plugins
• About / Contact

jQuery Podcast & Essential jQuery and MooTools Snippets

Many of you probably already know this but I like to consider myself a bit of a JavaScript chameleon. If you know that then you probably know I'm a MooTools fanatic that periodically dabbles with jQuery. I'm happy to announce that I was able to join Elijah Manor and Ralph Whitbeck on the jQuery podcast this past week to talk jQuery, MooTools, and web development in general. Head on over to the jQuery blog for more information or iTunes to grab the podcast.

As an extension of my podcast appearance, I wanted to share a few code snippets to make your introduction to MooTools or jQuery easier.

Featured jQuery & MooTools Snippets

Using jQuery and MooTools Together

Did you know that you can use jQuery and MooTools within the same page? It's easy to!

<script type="text/javascript" src="moo1.2.4.js"></script>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() { //moo stuff
	$('p').css('border','1px solid #fc0'); //jquery
});
</script>

Using Sizzle Within MooTools

Prefer to use jQuery's selector engine within MooTools? No problem -- here's how:

//just as reader "Ryan" mentioned....
Window.$$ = function(selector){
	return new Elements(new Sizzle(selector));
}

jQuery and MooTools Link Nudging

Link nudging is a classy, subtle effect that makes your websites more dynamic.

/* jquery */
$.fn.nudge = function(params) {
	//set default parameters
	params = $.extend({
		amount: 20,
		duration: 300,
		property: 'padding',
		direction: 'left',
		toCallback: function() {},
		fromCallback: function() {}
	}, params);
	//For every element meant to nudge...
	this.each(function() {
		//variables
		var $t = $(this);
		var $p = params;
		var dir = $p.direction;
		var prop = $p.property + dir.substring(0,1).toUpperCase() + dir.substring(1,dir.length);
		var initialValue = $t.css(prop);
		/* fx */
		var go = {}; go[prop] = parseInt($p.amount) + parseInt(initialValue);
		var bk = {}; bk[prop] = initialValue;
		
		//Proceed to nudge on hover
		$t.hover(function() {
					$t.stop().animate(go, $p.duration, '', $p.toCallback);
				}, function() {
					$t.stop().animate(bk, $p.duration, '', $p.fromCallback);
				});
	});
	return this;
};

/* jquery usages */
$(document).ready(function() {
	/* usage 1 */
	$('#nudgeUs li a').nudge();
	/* usage 2 */
	$('#nudgeUs2 li a').nudge({
		property: 'margin',
		direction: 'left',
		amount: 30,
		duration: 400,
		toCallback: function() { $(this).css('color','#f00'); },
		fromCallback: function() { $(this).css('color','#000'); }
	});
});

/* mootols link nudge */
window.addEvent('domready',function() {
	$$('#nudges a').addEvents({
		'mouseenter': function() { this.tween('padding-left',20); },
		'mouseleave': function() { this.tween('padding-left',0); }
	});
});

jQuery and MooTools Search Bookmarklets

These bookmarklets will allow you to highlight text on a page and search the jQuery or MooTools websites to learn more about the phrase.

jQuery Events within MooTools

The following MooTools snippet allows you to use jQuery-style syntax for event listening.

//hash the element.natives so we can do stuff with it
var hash = new Hash(Element.NativeEvents);
//remove items that need to be replaced, add their replacements
hash.erase('mouseover').erase('mouseout').erase('DOMMouseScroll');
hash.include('mouseenter',1).include('mouseleave',1);
//initialize this
var eventHash = new Hash({});
//for every event type, add to our hash
hash.getKeys().each(function(event){
	eventHash[event] = function(fn) {
		this.addEvent(event,fn);
		return this;
	}
});
//make it happen
Element.implement(eventHash);

JavaScript FTW!

Here are a few other MooTools and jQuery tutorials you may like:

• Sexy Opacity Animation with MooTools or jQuery
• Google-Style Element Fading Using MooTools or jQuery
• iPhone Click Effect Using MooTools or jQuery
• Record Text Selections Using MooTools or jQuery AJAX
• Remove Broken Images Using MooTools or jQuery
• Duplicate the jQuery Homepage Tooltips Using MooTools
• All jQuery Tutorials
• All MooTools Tutorials
• All MooTools & jQuery Demos

Isn't the JavaScript community great? MooTools FTW!

Discussion

The Bottom Line