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:

Keep reading →

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/

phatfusion has developed an awesome image based menu using mootools. Similar to the menu located at http://www.mootools.com; this Image Menu delivers a beautiful user experience.

Some Key Features

• onClick event keeps selected item open.
• Click open item to close.
• Specify a function for the onClick event.
• Auto open when the page loads

See it in action at: http://www.phatfusion.net/imagemenu/index.htm