43 Essential MooTools Tutorials and Plugins

September 3, 2012



MooTools is a miniature, object-oriented and extremely popular in widespread support for JavaScript, written in JavaScript which boost the intermediary and harmony of your website. Its user interface does a very important role within the achievement of a website; CSS, JavaScript, and AJAX are usually familiar to produce users the relaxation of intense user interface for the last several years. However, by means one among the foremost well-liked in common JavaScript libraries, MooTools you will be able to have an additional efficiency and interaction in your web site. In this writing some focus will be given on some MooTools instruction and plugins which might be really useful if you are simply getting into within the feature of MooTools.

1. How to Auto Caption Images Using MooTools:

In this MooTools will allow you to write succinct and elegant JavaScript within an intuitive framework. In the tutorial, we’re going to auto caption images on-the-fly using a bit of MooTools magic. Together, we’re going to write a simple script that will: Select all images with the class of captioned, Take its title attribute or alt attribute and Display it right below the image.

More Information / Download Link

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.

More Information / Download Link

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.

More Information / Download Link

4. Template 1.4.2

This is a templating engine for MooTools. Substitution is driven by tags that define which action will be taken and whether the context should be switched. Comes with predefined template tags for getting the developer started on his projects. Requirement is JavaScript enabled on client side.

More Information / Download Link

5. SideBySlide

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.

Requirements: JavaScript enabled on client side

More Information / Download Link

6. MooSlide

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.

More Information / Download Link

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.

More Information / Download Link

8. Facebook Sliders With Mootools and CSS

One of the great parts of being a developer that uses Facebook is that one can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and the slider. A slider allows the user to drag a slider across a given plain to set a value instead of the boring, tedious text box.

More Information / Download Link

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.

More Information / Download Link

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.

More Information / Download Link

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.

More Information / Download Link

12. Twitter Emulation

People all over the world love Twitter because of how easy it is to use. All you need to do is type in your current status, click “Update”, and you’re done. What most people probably don’t know is how simple it is to emulate Twitter’s functionality. Using PHP, MySQL, and MooTools javascript, you can implement a Twitter-like status system in no time.

More Information / Download Link

13. Fancy Navigation with MooTools JavaScript

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.

More Information / Download Link

14. MooFlow

In a nut shell it is an image gallery, but this only scrathches the surface. Here are some of its features: autosetup graps all images inside a element ; autoresize on changes of window dimensions ; fullscreen option ; scrolling with mouse wheel ; scrolling with key input (left and right cursor) ; autoplay presentation loop ; reflections via javascript ; load images via json (with event or on startup) ; load images from a html-source with selector-filter ; creates the UI automatically ; UI skinable via CSS ; fullsize viewer option ; can run multiple instances.

More Information / Download Link

15. MooColumns

MooColumns is a MooTools 1.2 class that allows you to divide content into multiple columns quickly and easily.

More Information / Download Link

16. MooScroll

MooScroll is a MooTools 1.2 class that allows you to customize how the scrollbar looks on scrollable divs.

More Information / Download Link

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.

More Information / Download Link

18. AutoCompleter

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.

More Information / Download Link

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?

More Information / Download Link

20. Window Growl

Tooltips with a difference.

More Information / Download Link

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.

More Information / Download Link

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.

More Information / Download Link

23. JavaScript Time Picker

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.

More Information / Download Link

24. FancyUpload

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.

More Information / Download Link

25. SmoothGallery 2.1

This javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website.

More Information / Download Link

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.

More Information / Download Link

27. Two CSS vertical menu with show/hide effects

CSS menu and “Web 2.0″ transition effects are topics very popular on their site and in general they receive a lot of code requests about these arguments. So they wrote this simple tutorial with two vertical menu examples with show/hide menu effect. First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.

More Information / Download Link

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.

More Information / Download Link

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).

More Information / Download Link

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.

More Information / Download Link

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.

More Information / Download Link

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.

More Information / Download Link

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.

More Information / Download Link

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.

More Information / Download Link

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.

More Information / Download Link

36. Milkbox-Expanded lightbox for Mootools 1.2

Nothing special: just another lightbox clone, this time written for Mootools

More Information / Download Link

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.

More Information / Download Link

38. FancyZoom

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).

More Information / Download Link

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.

More Information / Download Link

40. ToolTip_MooTools

This plugins use Gzip loader technique that will deliver CSS and Javascript files more faster and also with minimun HTTP request.ToolTip let’s you create mouse over tooltips to your content and allows you to show additional information.

More Information / Download Link

41. Tips-MooTools

A basic Tooltips. Simple to use.

More Information / Download Link

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.

More Information / Download Link

43. Magic Zoom

Magic Zoom is a JavaScript zoom tool. It’s the best way to display images in incredible detail.Features * Fast – fast-loading thanks to the lightweight script. * Easy – add it to your website in only 5 minutes! * Customisable – change the size, position, colors and more. * Smooth – people love to use the smooth action and close-up zooming. * Accessible – works if JavaScript is disabled (large image opens as a link).

More Information / Download Link

, , , , ,

About Souvik Banerjee

Web Developer and SEO Specialist with 10+ years of experience in open source web development. He is also the moderator of this blog (www.rswebsols.com)

View all posts by Souvik Banerjee

Related Posts

No comments yet.

Leave a Reply

Current ye@r *