Let me start by saying that I love jQuery. Most of the time, it makes it very easy to write sane code. Sometimes, however, it just feels weird.

For example, let’s say we need to insert a link at the beginning of a div. You might write something like:

$('#myDiv').prepend('<a href="http://my.host/path" title="This is a cool link!">Click here</a>');

-or-

$('<a href="http://my.host/path" title="This is a cool link!">Click here</a>').prependTo('#myDiv');

It seems fairly straightforward, but it’s a maintenance nightmare, because you now have raw HTML buried inside of your Javascript. If it’s complicated HTML that is being dynamically constructed, it’s all too easy to introduce hard to find browser parser errors.

MooTools, on the other hand, gives you a powerful alternative with its Element class.

To create a new DOM element you literally call a constructor and pass the tag name and attributes to it. So, for example, that same link would be built with:

var myLink = new Element('a', {
 href: "http://my.host/path",
 title: "This is a cool link!",
 text: "Click here"
});

At the price of a handful of few extra bytes, you get clear, legible code. The equivalent of .prepend() is thus:

$('#myDiv').grab(myLink, 'top');

While this might at first seem less intuitive, you can use the same method call to insert that link before or after the selected element. Sure, you could do that with .before() or .after() in jQuery, but imagine if you needed to make the insertion point variable!

There are also a slew of additional benefits, like ECMAScript 5 array methods, support for multiple inheritance, and event handlers that make it easy to detect if the user is pressing Alt while right clicking.

Give MooTools a try, but before you do, I strongly urge you to read Sean McArthur’s excellent post, A Better Way to use Elements, on the difference between $() and $$(). If you come from a background of using Prototype, it will seem perfectly natural, but jQuery users can be caught by surprise.

Mootoos 1.2 Beta has landed and if you plan on using it soon, you need to get cracking porting & learning the new API.

Some of the changes:

• Test Suite Integration
• Fx.Tween & Fx.Morph to Fx.Style
• Hashables
• Sortables (brand  new version)
• Number Math integration
• Improved object inheritance with Extend & Implement

Read all about it here:
http://blog.mootools.net/2007/11/14/mootools-1-2-beta-1

via Clientside

Today we continue our series exploring the way spacial data is handled in Javascript toolkits with a look at mootools.  (Read Previous Installments on jQuery and prototype).   Similar to prototype, mootools includes dimensioning information in the Element Object.  Unlike prototype, mootools includes positioning information there as well.  Window & Document level information is contained separately in Window.size.js

Element Dimension & Position Properties (Element.Dimensions.js):

•  scrollTo(): Scrolls an element to a specified position (in some toolkits, scroll to scrolls the container to the specified element).
• getSize(): Returns an Object representing all size & scroll values of the elemen.
• getPosition(): Returns the real offsets of the element (relative to document).
• getTop: Returns the top position of the element (relative to the window).
• getLeft: Returns the left position of the element (relative to the window).

The Window dimensions (Window.Size.js):

• getWidth: Returns width Window
• getScrollWidth: Returns width of Document
• getHeight: Returns height of Window
• getScrollHeight: Returns height of Document
• getScrollLeft: Determine current left offset of viewport relative to document.
• getScrollTop: Determine current vertical offset of viewport relative to document.
• getSize: Same as Element.getSize.

Next time, we’ll look at YUI.

If you’re looking for a fast and easy way to add tabs to your next project.  It doesn’t get simpler than Mootabs: a lightweight tab widget in mootools.

Key Features:

• Able to retrieve tab contents via AJAX
• CSS Styling
• Transition effects
• Simplified Markup

I’ve noticed the transitions can be a bit coarse and distracting so I recomend using mootabs without strong transitions if possible.

Get Mootabs Here: http://www.silverscripting.com/mootabs/

As of 1.2, the Mootools Hash plugin has been promoted to a Native type.  Basically, a Hash is a wrapper for native Javascript objects (keeping things OO all the way & preventing attacks on the Object Prototype). 

What it does:

• Provides a wrapper for associative arrays.
• Works just like a traditional Mootools Array (Each is your friend)
• Supports Generics.

Read more about Hashes in Mootools 1.2 here:

http://blog.mootools.net/2007/10/8/what-s-new-in-1-2-the-hash

For most developers, the most noticeable change with Mootools 1.2 is the deprecation of the incredible FX.style & FX.styles libraries in favor of the new Fx.Tween & Fx.Morph.  So what’s the difference?  It’s really a name change to more accurately describe the behavior and use of the two different tools.

What’s pretty incredible though, is how powerful the revamped Fx.Morph has become.  You can now smoothly transition from any given class in your CSS stylesheet smoothly.  This fully separates the behavior (e.g. A smooth transition to an error state) from the CSS defined appearance of that Error state. 

If the property cannot be calculated, it will be set at the start of the transition.

Lastly, the "wait" option has been replaced with a new "chain" option.  This allows  you to simply append effects at the end of the sequence currently being executed.

Read More on the Mootools Blog

http://blog.mootools.net/2007/10/23/The_Best_Javascript_Effects_Now_Even_Better