1. How to Auto Caption Images Using MooTools:
2. AJAX Username Availability Checker Using MooTools 1.2:
There a many examples of egregious usages of AJAX out there but every once in a while you find a great usage of AJAX. One great usage is the username availability checker. Why make the user submit their form if you can just use AJAX to let them know if it’s available right away? Here’s how you can implement a username available checker using MooTools 1.2.
Getting down to business, the validate function gets called as soon as the class is instantiated. Once the username gets to its designated minimum length, an AJAX request is sent on every keyup event. If the target script returns a positive response, the username is available and we should show the available CSS class and image. If the target script returns 0, the username is taken and the taken CSS class and image are displayed.
3. Multiple Select Widget with Mootools
MultipleSelect allows you to add a custom style to html multiple select boxes. And you don’t even have to hold down the CTRL-key anymore when choosing multiple items.
4. Template 1.4.2
This is an accordion slider built with MooTools. The accordion works only in horizontal form. The panels can contain any kind of HTML content.
Configurable options: The ID of the div wrapping the slides (wrapper), Class name of the slides, Class name of the toggler element, The ID of the slide to open by default on page load.
MooSlide is an ajax replacement for the common lightbox found on many pages. It can hold any type of content, from html, over images to flash. The dropdown can be slid into view from top of the page as well as from the bottom, and can also be used to create nice looking login panels, like on our page here.Based on the mootools framework, this script is sleak, fast and can be used more than once on a page through its object orientated programming code.
7. SqueezeBox – Expandable Lightbox
SqueezeBox is an unobtrusive LightBox inspired overlay, for modal boxed content on your site. It’s a snap to show images but just as easy to use HTML elements, Ajax requests, iFrames, SWF movies and more.
8. Facebook Sliders With Mootools and CSS
9. Updated Mootools content Slider Class V2
This latest update adds the option to perform both horizontal and vertical scrolling, as well as fading – or even a combo slide/fade transition! Nothing to it, really. Just a container div, some divs inside it with your content elements, and some contols (if you want them.) You can give the container and content elements any id and/or class you desire, as long as you reference them correctly when instantiating the class. The control buttons (play/next/num. nav) are the only ones you can’t change.
10. News ticker with horizontal scrolling using Mootools
Do you like Newsvine News Ticker? In this tutorial a simple way to implement it on your website! Finally, after a lot of your requests they added this tutorial which explains how to implement a News Ticker, with news vertical scrolling, using mootools. It’s very simple and quick to implement in your web projects. They took inspiration from Newsvine Live panel.
11. Kropper image cropping script
Kropper is an unobtrusive script that will enhance any site that wants to offer an image cropping tool for its visitors. Unlike other scripts, Kroppr is able to ROTATE, zoom and move the image in the real time without using plugins – such as flash or java. The cropping is done after the user is satisfied with the settings. This way, the load put on the server is minimised and also the visitor’s experience.
12. Twitter Emulation
Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where’s the originality? They’ve created a fancy navigation menu that highlights navigation items and creates a chain effect.
MooColumns is a MooTools 1.2 class that allows you to divide content into multiple columns quickly and easily.
MooScroll is a MooTools 1.2 class that allows you to customize how the scrollbar looks on scrollable divs.
17. Sliding Login Panel with Mootools
Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest WordPress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.
This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.
19. Use Custom Missing Image Graphics Using MooTools
Missing images on your website can make you or your business look completely amateur. Unfortunately sometimes an image gets deleted or corrupted without your knowledge. You’d agree with me that IE’s default “red x” icon looks awful, so why not use your own missing image graphic?
20. Window Growl
Tooltips with a difference.
21. ReMooz (v1.0)
ReMooz is an open-source widget for great looking and unobtrusive inline-pop-ups, powered by MooTools. It enables how your vistors browse through content, such as thumbnail images and HTML. ReMooz features centered or relative-positioned draggable zoomed images, content preloading, fading captions, with plenty of options and is highly configurable: Add a simple image zoom or create a fancy design element for any graphic that needs to be enlarged on your site.
22. mooSlide – AJAX content slider
mooSlide is an ajax replacement for the common lightbox found on many pages. It can hold any type of content, from html, over images to flash. The dropdown can be slid into view from top of the page as well as from the bottom, and can also be used to create nice looking login panels, like on our page here. Based on the mootools framework, this script is sleak, fast and can be used more than once on a page through its object orientated programming code.
The first ever Time Picker that utilize a very easy drag and drop interface. With it’s unique design, anyone can drag the minutes or hour hands independently to select a time.
Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all.
25. SmoothGallery 2.1
26. MooTools ScrollSpy
It has been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific functionality with just a few simple parameters.
27. Two CSS vertical menu with show/hide effects
28. MooSocialize – AJAX based social bookmarkwidget.
Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc. By clicking the mooSocialize button, a window will appear, which lets you choose your favorite network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking. But that’s not all – it doesn’t redirect you to that page, but opens up the page in a hovered layer. Convenient and easy. On top of the opened layer is a small “x”, which allows to close the window later on.
29. Select Box Factory v1.0
The factory has produced a multiple-select box, with “sifting” tool attached. Try searching for one of the items in the list, or typing a letter in there. Next to it is the exact same list rendered as a dropdown (takes about 5 seconds to make this transition).
30. AJAX Username Availability Checker Using MooTools 1.2
Why make the user submit their form if you can just use Ajax to let them know if it’s available right away? Here’s how you can implement a username available checker using MooTools 1.2.
31. BySlideMenu-Mootools plugin
BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want (ul/li, div, p …) using images and/or text. Features * Works horizontally or vertically. * Automatic size – The container idth/height can be adjusted automatically. * Menu is expandable by mouseover or by click, as you want. * Menu can be pinned or not, by mouseover or click, you choose. * A default index can be defined. * Can be used with any elements (ul/li, div, p…) * Overflow support.
32. Mif.Menu with Moottools
Mif.Menu supports multi-level and key navigation as well. There are ART style and shadow style context menu for you to choose from.
33. Image menu with mootools
It allows onClick event keeps selected item open, Click open item to close, Specify a function for the onClick event, Auto open when the page loads.
34. Bumpbox-Mootools Plugin
Bumpbox is another lightbox clone with a few advantages over other lightboxes – it supports not only all common media types but also PDF’s. Yet, the integration and implementation on your own site is pretty simple. Just add the scripts to your head section, add classes to your links that should use bumpbox, define a rel tag with the size that the bumpbox should have and you’re ready to roll. Bumpbox automatically detects what kind of filetype you wish to show in the box, so you do not need to specify the type, easing the process of integration. Bumpbox works in all major browsers, including IE6.
35. Zoomer – MooTools Plugin
Zoomer is based on LightBox JS, and is perfect for photo galleries. It can display large images on top of a page, and has the ability to group multiple photos in one set. However, there are numerous advantages to use Zoomer instead of LightBox : * Images can be dragged around. * Multiple images can be open at the same time. * Visitors can still access the underlying content of the page. * It’s easier for visitors to find the navigation buttons. * The code is easy to modify. * Zoomer is compatible with LightBox.
36. Milkbox-Expanded lightbox for Mootools 1.2
Nothing special: just another lightbox clone, this time written for Mootools
37. MultiBox-Mootools plugin
A lightbox that supports a wide range of media, including html pages. It can also be created and called dynamically, eg. from within a flash movie.
Fancy zoom box loosely based on Cabel Sasser’s FancyZoom. Built in prototype and jquery. Works unobtrusively with content
already on the page, including images, headings, text and flash (pretty much any html).
39. Twitter-like chars counter
This is Twitter-like chars counter example using MooTools. It is counter decreases, from the max value of available chars in the input field (20 in this example) to zero, while you type something into the input field.
A basic Tooltips. Simple to use.
42. Simple 3D Carousel
Resize images to fill the entire browser window while maintaining proportional dimensions. Fullscreen slideshow complete with transitions,navigation, captions, and preloading. Integrate with existing sites or create your own portfolio gallery.
43. Magic Zoom