MooTools Tutorials

  • MooTools Tip: Class.toElement

    Many of you may not know of a feature that's baked into MooTools' Class internals: Class.toElement. Class.toElement allows you to pass the $ (or document.id) method an instance of your class and the instance will be treated as an element.

  • Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is dragging. Why not double the awesomeness of Element dragging by adding fading?

  • Create a Simple Slideshow Using MooTools, Part III: Creating a Class

  • Introducing MooTools Cache

    MooTools Cache is a new proof of concept plugin that I've created so that developers may easily "cache" values. Cache allows you to set, get, and refresh values. Cache also features a system of reading and writing from Cookies so that the cache remains persistent throughout different pages of your website.

  • MooTools Quick Coding: Expand Abbreviation

    One of the many great reasons for an official MooTools Forge is that I get to check one place to find numerous MooTools plugins that I've never seen before. One such plugin, Expand Abbreviation, allows the developer to create elements using ZEN-Coding methodology. Instead of coding numerous new Element blocks, Expand Abbreviation generates elements for you based on a string syntax.

  • MooTools Tip: Event.stop

    Events are a huge part of JavaScript because so much of our JavaScript is triggered by the user's actions. Quite frequently we will assign a listener to a link and immediately want the default click action stopped. For example:

  • Create a Simple Slideshow Using MooTools, Part II: Controls and Events

  • MooTools Overlay Plugin

    Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are bloated, inflexible, or nonfunctional. The only way to make myself happy was to create one of my own.

  • Create a Simple Slideshow Using MooTools

    One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events. We're going to create a simple slideshow from which we'll build on.

  • MooTools Forge / GitHub Plugin Structure Shell Script

    One thing I love about the MooTools Forge is that it requires a strict structure for its plugins i.e. requiring a README.md file, Source directory, etc. I've created a shell script that I can run that creates the directory structure and files required to add my plugin to GitHub and then the Forge.