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.

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/

Here’s a handy plugin to attach elements to view port so they don’t scroll with the page.  Scripts for both pinning and unpinning are available. 

To pin:

$(‘fxtarget’).pin();

To unpin:

$(‘fxtarget).unpin();

You can get it online from clientside here:

http://clientside.cnet.com/code-snippets/visual-effects/new-elementpin/

It’s been around all over and it’s not exactly a spring chicken, but it should probably be here to. The excellent Dev thought Fancy Menu is a visually powerful & fun menu system built in mootools.

One Note I’d like to add, however, is how well written & useful the writeup on the menu is.

Check it out at: http://devthought.com/cssjavascript-true-power-fancy-menu/

Meet the NoGray Color Picker.  It’s one of the most powerful color pickers I’ve yet seen due to its HSL support. (Thank You Mootools Color Plugin).  It’s also highly customizable to your projects since the widget interface is html based.

Also of note is its integration with input boxes.  The color of the input box background or a swatch next to the box can be controlled by the widget along with the hex value inside the box.

More info from the makers:
http://nogray.com/color_picker.php 

Meet NoGray’s Docking Menus. A simple, capable OSX style docking menu built on Moo Tools. This could be an excellent way to add some visual spice to your next design.

Features:

• Supports centering when Absolutely Positioned
• CSS Based
• Duration control on animations

http://nogray.com/docking_menu.php

No Gray Calendar is a simple, easy to use and highly configurable calendar widget built on the mootools framework. The calendar is built dynamically from an <a> element it  modifies specified input fields and is attached to a specified container element. 

Features:

• Create any numbers of months per calendar.
• Set the weekend, days off, holidays (dates off), start day of the week.
• Start and end date.
• Multi selection with limits or without.
• Skinnable (using CSS).
• Can have any number of calendars in any page.
• Optimized for best performance.

You can find it online at: http://nogray.com/calendar.php

Usage Examples After the Jump:

For example:

HTML:

<input type="text" id="date3" name="date3"> <a href="#" id="cal3_toggler">Open Calendar</a> <div id="calendar3"></div>

Script:

Script: var calender3 = new Calendar("calendar3", "cal3_toggler", {inputField:'date3', numMonths:3, multiSelection:true, maxSelection:5, forceSelections:[ {date:'last Saturday'} ], dateFormat:'D, d M Y :: ', idPrefix:'cal3'});

In the above example: the calendar is placed in the calendar3 div when the cal3_toggler is clicked and modfies the date3 field.

Found online via: webappers

This has been out there for quite a while now, but I thought it should be included in the bestiary out of completeness.

http://clientside.cnet.com

E2 Gallery is a beautiful and easy to use photo gallery widget from (E)2 interactive.
Some Key Features:

• Smooth Image Transitions
• Quick change between 4 designs
• Thumbnail Viewer
• Automatic Photo Detection
• Image Uploader Included
• Four Design Viewer Options
• No Database Needed
• Automatic Adjustment to Image Sizes
• Reads in Photo Meta Data (IPTC Info)  (title, description, author, copyright info)
• Dynamically Built using PHP
• Easily Maintained
• Hide/Show Thumbnails

Check It Out Here:

http://www.e2interactive.com/e2_photo_gallery/