jQuery Podcast & Essential jQuery and MooTools Snippets

By  on  
jQuery

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 Bookmarklet MooTools Bookmarklet

 

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:

Isn't the JavaScript community great? MooTools FTW!

Recent Features

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    MooTools ASCII Art

    I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create.  ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous;  ASCII...

Discussion

  1. Chuck Norris learned javascript from David!

  2. Can you explain what are the benefits of using the two libs on the same page ?
    I’m a beginer js coder and i can’t find a difference between them :/
    Sorry if my post looks stupid to you.

  3. Arian

    @Pockata: The main thing is that MooTools tries to extend JavaScript as a language and jQuery is a very good DOM toolkit.

    MooTools can do the same as jQuery, but maybe not as good or convenient.

    If you use them both, you can use MooTools power (to extend the js language) e.g. the Class system and extending natives etcetera and use the jQuery ‘dom toolkit’.

    I do not recommend it, but in special cases, when file size doesn’t matter that much (server side javascript)…

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!