MooTools Tutorials and Resources Round-Up

Advertisement

MooTools is a JavaScript framework that focus on being flexible, modular and compact. While still not on par in number of resources with other JavaScript frameworks such as jQuery, the MooTools community has generated a large number of articles, tutorials and third party plugins that can be considered and mature and sophisticated enough for most needs.

A word about MooTools

One of the core principles of MooTools is to provide a better application programming interface for JavaScript developers, making the language better by extending its native elements and providing more concise object oriented utilities.

As a consequence of that, some people may be inclined to think that MooTools treats browser scripting as a less important feature. Indeed, MooTools is not a DOM scripting toolkit, but the whole purpose of making JavaScript better is that developers have a more solid base over which to create readable, robust, reusable browser scripting libraries.

Articles/Tutorials

Starting points

The official documentation1
A really good and complete documentation. It has a very intuitive format that makes it both an excellent reference and tutorial.

Official Documentation

jQuery vs MooTools2
A mature discussion on the differences between jQuery and MooTools.

MooTools for the non-programmer
A three part series of tutorials about MooTools targeted at non-programmers:

The MooWalkthrough6
A wiki-based walk through MooTools intended to introducing the library.

The MooTorial7
A collection of tutorials to guide MooTools’ newcomers.

MooTorial

MooTools classes8
A basic view on MooTools’ use of classes and how it compares to other approaches.

Natives and Elements9
Explains what are native types in JavaScript and how MooTools extends and provide means for anyone to extend their functionality. It also explains the Element class.

Select and create elements10
Tutorial on how to select specific elements as well as how to create and insert new elements on the page.

30 days of MooTools
A series of tutorials about key features in MooTools. (It is still incomplete – it currently has 23 tutorials)

  1. Intro to the Library11
  2. Selectors12
  3. Intro to Using Arrays13
  4. Functions14
  5. Event Handling15
  6. Manipulating HTML16
  7. Set and Get Style Properties17
  8. Input Filtering Part I – Numbers18
  9. Input Filtering Part II – Strings19
  10. Using FX.Tween20
  11. Using Fx.Morph, Fx Options and Fx Events21
  12. Drag and Drop using Drag.Move22
  13. Regular Expressions23
  14. Periodical and Intro to Hashes24
  15. Sliders25
  16. Sortables and Intro to Methods26
  17. Accordion27
  18. Classes part I28
  19. Tooltips29
  20. A Few Mootools Tabs30
  21. Classes part II31
  22. Fx.Elements32
  23. Fx.Slide33

Intermediate

Facebook modal box34
It reproduces Facebook’s modal box in MooTools. A Very simple solution to get a Facebook-style modal box without the need of any external plugin.

Using custom missing image graphics35
A very elegant and extremely simple solution to handling missing image graphics with a custom fallback image.

Sending Email notifications for broken images36
A logic follow-up to the previous tutorial. It shows how to use AJax and PHP to send email notification on the occurrence of broken images.

Skype-style buttons37
How to create a Skype-style button.

skype style

MooTools Flashlight effect38
An eccentric, however interesting effect.

Flashlight

Snook-style navigation39
A MooTools revisit of a tutorial40 by Jonathan Snook.

Explode effect on Ajax page loads41
How to create an effect that makes the current content ‘explode’ off-screen while another content is fetched and loaded via ajax.

Font-Size scroller with Cookie save42
Shows how to create a scroller that sets the font-size and store this information in a cookie.

font-size Scroller

Track Ajax link clicks using Google Analytics43
A very insightful solution to tracking ajax-based navigation in Google Analytics.

Periodicar Ajax updates using MooTools44
Shows how to implement a very simple function that periodically makes a ajax request on the background.

helps you determine if caps lock is on45
A nice and simple technique for easily determining if caps lock in on. Might help improve usability, specially in login scenarios.

Caps Lock on

Simulate Flash horizontal navigation46
Tutorial on how to create a horizontal navigation web site.

Product Highlighter47
Slick rollover mechanism that works well as a product highlighter.

Product Highlighter

Auto caption images48
How to automatically extract alt and title content and add it as captions to images on the page.

toElement method49
Explains and shows an interesting use case for the toElement method in MooTools.

outerClick event50
An implementation of a custom event for when a user clicks outside of a given element.

Saving a sortalbe nested list51
A tutorial with a full implementation of a sortable nested list, from MooTools to MySQL.

CSS sprites with MooTools52
A MooTools version of an article published on A List Apart about CSS sprites using jQuery.

Sprites

Swiff53
Explains what is the Swiff class and how it can be used to make flash elements communicate with JavaScript.

Fixing sIFR printing with CSS and MooTools54
The use of sIRF can help you achieve the typography you want on the screen, but there may be problems when the user tries to print the page. This article shows how to work around that.

Advanced Topics

The Dollar Safe Mode55
An article explaining a good practice for plugin developers that want to make their libraries compliant with “MooTools 1.2.3 Dollar Safety”, which means that it respects the global name $ in edge cases where people need to use more than one JavaScript library at the same time.

Custom Events56
A nice example on how to define and explore custom events (such as alt+clicking) in MooTools.

Custom Events

Element Storage57
An overview on the Element Storage functionality. How it works and how it could be used to make code easier to write and better organised.

Chaining with MooTools58
A guide to the MooTools’s Chain class and how it can be used in custom classes.

Chaining

Set style per media59
Using JavaScript for dynamic styling may defeat the purpose of having a style for each media, this tutorial shows one way to be media-specific while dynamically changing CSS properties.

Creating a custom “:selected” pseudo-class in MooTools60
How to create your own pseudo-class selector in MooTools.

The Mouse Ghost61
An interesting experiment on saving the cursor coordinates and then reproducing its movements.

Ghost Mouse

5 Advanced techniques for MooTools development62
Things that you don’t get by reading documentation.

Don’t repeat your Moo63
A very insightful article on how to achieve reusability in your JavaScript code with MooTools, adhering to the DRY (Don’t Repeat Yourself) principle.

dont repeat your moo

Private methods in MooTools64
Shows how to implement private methods in JavaScript with MooTools.

The Singleton class mutator65
A tutorial that shows how to write a class mutator that implements the singleton design pattern. A class mutator is a macro-like method/idiom to be used inside a class definition

Binds class mutator66
A mutator that binds a method to the instance of a class so that it can be accessed thorough the ‘this’ keyword even in the class definition.

Plugins

SmoothScroll67
Scroll smoothly through anchors within a single page.

Kroppr68
A full-fledged image cropping/resizing/rotating plugin.

Kroppr

mooSocialize69
A widget bar that manages a wide variety of social bookmarking and social network content sharing systems.

MooTools Event Calendar 70
A MooTools Calendar class that supports week/day/month view and the addition of events.

Calendar

Pamoorama71
It creates a container div that allows users to scroll through a containing image. Its intended use case if to horizontally scroll through a panorama image.

Pamoorama

Slider72
A Slider plugin that supports both vertical and horizontal bars that can be freely dragged or snap to predefined steps.

SortableTable73
Sort and filter tables.

MooWheel74
A data visualisation plugin that explores the possibilities of the canvas element.

MooWheel

Moosture 75
A Mouse gesture framework that allow you to trigger an event based on a predefined mouse gesture.

Moosture

inlineEdit76
An inline editor plugin that makes all elements with a specified class name editable and adds a special onSave hook method to save the changes.

Navigation

Image Menu77
A horizontal menu that reveals more of the image as you rollover it.

Image Menu

Sexy sliding JavaScript side bar menu78
Generates a sliding sidebar menu.

MooFlow79
A full-fledged image slider that resembles cover flow.

MooFlow

Simple 3D Carousel80
A 3d carousel.

MooHover81
Allows you to include fancy transitions in CSS based hover menus.

Layout and Style

mooRainbow82
A color picker utility.

Rounded Corners83
Creates round corners on divs on the fly.

Reflection84
Generate image reflections on the fly with a wide range of customisation options.

Reflections

MooColumns85
A class that allows you to dynamically organise content into multiple columns.

MooScroll86
A MooTools class that allows the customisation of how the scrollbar looks on scrollable divs.

MooScroll

Tooltips

Window Growl87
Tooltips in the same style as the Mac OS X’s Growl system.

ToolTip

Tips88
A tooltip showdown.

MooTooltips89
Toolstips that can have html or plain text content loaded with Ajax or inline.

Form Usability

FormCheck90
This plugin allows you to define a groups of validation rules to be applied to forms.

Calendar91
Features simple to create date pickers.

Date Picker

Validate92
A simple form validation plugin.

JavaScript Time Picker93
A time picker plugin. It uses the same idea as the date picker pattern, but applied to time picking.

MultipleSelect94
Completely customised multiple select elements.

Multiple Select

HTML Form Tips95
Inspired by Twitter, it features a “remaining characters” count that’s automatically updates as the user types.

Select Box Factory v1.096
A class that makes select elements support multiple selection and selection drill down according to a variety of options.

Slideshow

Slideshow 2 97
Slideshow plugin, resembles the slideshow in iPhoto and Photos in Mac OS X and iPhone respectively.

Slideshow 2

SmoothGallery 2.098
A simple and elegant slideshow plugin.

Ajax

Fancy upload 99
A plugin that integrates Ajax and the Swiff functionality in MooTools to create an upload manager.

MooTabs – Tiny tab class for MooTools100
A small plugin that helps in the creation of tabbed navigation through elements that can be retrieved via ajax.

Ajax login form101
A very simple ajax-based login form.

Page Loader102
Provides classes to work with loading content via ajax and displaying results in the current page. It also provides a history class that manages the history of the loading area.

Page Loader

MooTools Dotter103
A simple and effective Ajax-loading indicator that relies solely on JavaScript and CSS instead of using images or animated GIFs.

MooTools Dotter

Content Overlay

Lightbox104
A port of the Lightbox plugin that handles a collection of images in a overlay.

MediaBoxAdvanced 105
Content overlaying that works with several different media types.

MediaBox

ReMooz106
Image overlaying plugin. Simple and elegant.

Multibox107
An overlaying plugin that supports images, flash, video, mp3s and html.

MultoBox

SlideItMoo 108
It packs a banner or image slider with an overlay image display effect that resembles Lightbox.

mooSlide 3.2109
Shows an overlay window at the bottom or at the top of the page with a variety of options.

mooSlide

Plugin Collections

moo.rd110
A collection of plugins that provides special effects, table management and more.

Clientcide Plugins 111
A large collections of plugins from the Clientcide blog.

Meteora112
A collection of widgets written on top of MooTools, from datagrids, to calendars to JsonRPC.

Rich user interfaces

Mocha UI 113
A rich user interface library, it makes web applications look and behave like desktop applications.

Mocha:UI

JxLib 114
A library for rich client user interfaces.

JxLib

File Manager 115
A complete implementation of a file system explorer that let’s you navigate through the files, rename and preview them.

File Manager

Text editor extensions

Plugins for Coda

Plugins for TextMate

↑ Back to topShare on Twitter

Diogo Terror is a web developer that is passionate about good design, whether that's in the graphic sense or in the computer science sense.

  1. 1

    Thanks for showcasing some of my MooTools plugins :) More to come.

    0
  2. 2

    Thanx, Great Post.

    0
  3. 3

    Just posted – List of Really Useful Plugins and Resources For MooTools on W3Avenue – http://digg.com/d1yqbt

    0
  4. 4

    I still like jQuery more then MooTools.

    0
  5. 5

    I think more credit needs to be given to David Walsh, considering over half of the links on this page are from his blog.

    0
  6. 6

    Hi! I think you really missed Milkbox in the content overlay section! :)

    http://reghellin.com/milkbox

    0
  7. 7

    really helpful and useful post thanks Diogo Terror!

    0
  8. 8

    Before I started to use jQuery I tried some things in MooTools, but I gotta say I’m pretty happy I got to know jQuery, which in my eyes is much more intuitiv and fits my coding more than MooTools. But nice Round-Up btw.

    0
  9. 9

    Mootools should not be compared to Jquery, as mootools is pretty much an object orientated take at javascript where as Jquery is a dom toolkit, its like comparing a tree to fruit.

    0
  10. 10

    Great list. Thx

    0
  11. 11

    Mootools really is great, anyone who has ever got frustrated with jQuery and decided to learn how to use mootools will testify. Plus not having to include a million plugins for the simplest things anymore is always good.

    Then only prob is the lack of decent docs (notice the search on the main site doesnt work as well)

    I recommend it highly

    0
  12. 12

    The MooTools team thanks you for your efforts in compiling this. Great work Diogo!

    David Walsh
    MooTools Project Team

    0
  13. 13

    I thank you, David, both as a writer and MooTools user, for giving me/us so much material to work with and write about :)

    0
  14. 14

    Fábio M. Costa

    July 28, 2009 9:26 am

    Loved the post, Mootools has plugins for everything!

    0
  15. 15

    Great Article!!
    Tanks a Ton !
    Smashing is really Great !!
    here is one that I worked on one of the mooflow slider , I like to share
    http://www.greenerbilling.com ( Home page+ Tour Page )
    http://www.ajeava.com (Tour Page)

    0
  16. 16

    MooTools FTW! Fantastic post, thanks :)

    0
  17. 17

    Anyone interested in the differences between jQuery and MooTools needs to read http://www.jqueryvsmootools.com/

    Summary: they both rock, but in different ways.

    0
  18. 18

    You can also find some plugins on esteak.net which is an inofficial mootools plugin repository.

    0
  19. 19

    If you ever wanted to do the Apple-style search bars. here’s a handy MooTools library we wrote to override the form element styles cross-browser:

    http://www.gracepointafterfive.com/apple-search-bar

    0
  20. 20

    Mootools Rocks!

    0
  21. 21

    Great Post! MooTools is nice. I have recently been using jQuery more, but have no reason to not enjoy MooTools also!

    0
  22. 22

    Nice article, I use some Mootools and some JQuery, I’ll check this out for more ideas when I get a sec.. thanks!

    0
  23. 23

    This is a great comprehensive list! Thanks for posting them.

    0
  24. 24

    Love the ‘tools. I was doing some jQuery the other day and was completely frustrated, not to say that it isnt a good framework, just isnt my style.

    Great post, MooTools needs some love

    0
  25. 25

    Great post. MooTools is the framework I use the most, almost every day. Thanks to the MooTools Team for this powerful framework. Cheers!

    0
  26. 26

    This is awesome…. this really gets into all things moo….;-)

    0
  27. 27

    So MooTools actually just a tiny script that modular and the core was separated from UI (like JQuery)? I never though of that… i’ve been thinking MooTools as a large framework compared with ExtJS, but looks like i were wrong

    0
  28. 28

    Thanx, really great post, I would say. Do you have the same one with jQuery?

    0
  29. 29

    [flamebait] this probably would have been more useful a few years back. obviously there are still mootools users but i think jquery, by and large, has become the defacto for javascript/prototype frameworks. [/flamebait]

    0
  30. 30

    There are hundreds of color pickers for JQuery and not a descent one for mootools,

    0
  31. 31

    Thank you for that great list. Mootools is my personal JS-Framework Fav, the syntax is more logikal in my eyes than it is in jQuery. I heard that Dojo is getting better and better each day, an article about it would also be very nice ;-)

    0
  32. 32

    Thanks for this list, I love mootools. Just chose it as the Javascript Framework for my CMS Prima. – demo.loopsolutions.co.nz.

    0
  33. 33

    This is one another awesome framework. Thanks for share, great stuff.

    0
  34. 34

    Mootools is great. I’ve used it since it was known as MooFX. You can do some amazing things with it and it makes development relatively easy.

    Some of my own Mootools Examples.

    0
  35. 35

    Please note that the link to the MooTools FileManager has changed: http://cpojer.net/blog/MooTools_based_FileManager_1_0RC2

    0
  36. 36

    Excellent breakdown of MooTools tutorials and resources, already bookmarked.

    0
  37. 37

    Don’t you forget “noobSlide” – a powerful and most lightweight class for creating slideshows / tabs: http://www.efectorelativo.net/laboratory/noobSlide/

    The list is also lacking the mighty Vista-Like Ajax Calendar: http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html

    Also “Sliding Tabs” (for 1.11, but after short google reasearch you’ll a find a 1.2 port) are one of musth have scripts ’cause they’re the only tabs for mootools that support dynamic tab height.

    You might also like these fancy tooltips: http://www.php-help.ro/mootools-12-javascript-examples/mootooltips-easy-to-make-good-looking-tooltips/

    There probably are more great scripts you missed, but unfortunatelly I don’t have time to review it all right now..

    Great respect for you guys you finally wrote an entire article ’bout the best (yet not the most popular for a reason) framework out there.

    Regards

    0
  38. 38

    Thanks for the info. I’ve never heard of MooTools til now.

    0

↑ Back to top