MooTools Tutorials

  • This Moo’s For You! MooTools 1.2 Has Arrived!

    U2's been singing this week because Monday was a beautiful day. Monday marked the release of MooTools 1.2, a landmark release. CNET's Aaron Newton (and MooTools developer) was so blown away by Valerio and Co's new ideas that he wanted to name this release 2.0 but Valerio chose to keep this version as 1.2. If you'd like details on the new improvements, please visit the MooTools blog.

  • MooTools Gone Wild: Element Flashing

    If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention, of course. That got me to thinking — I should go download some what about when we want a user's attention to focus on a specific element on the page without using cheesy graphics? Armed with the latest MooTools trunk and a dream, I've implemented flash(), which you can use on any element on the page.

  • AJAX For Evil: Spyjax

    With great power comes great responsibility. With every advancement in technology we face the threat of it being used for evil purposes. This is the case with AJAX. AJAX has a ton of great uses but one form of negative AJAX has taken life: Spyjax.

  • Facebook Sliders With Mootools and CSS – Now With Image Generation!

    A few weeks back, I posted Facebook Sliders With Mootools and CSS, which explain how to create Facebook-style sliders that control the height, width, and opacity of an image:

  • Post Load Basic View Source

    During one of my recent experiments, I used a ton of MooTools functionality to modify the elements on the page. Unfortunately, I kept running into a problem and couldn't figure out the problem. Here's a portion of the MooTools 1.2 code I had:

  • Prevent Internet Explorer’s Default Image Dragging Action

    Since the web is moving more and more toward a drag and drop world, it's important to prevent Internet Explorer's default dragging action when attempting to drag an image. JavaScript makes this possible.

  • Guest Blog: Create a Color Palette Using CSS and MooTools 1.2

    As you can see from my site's lack of design, I'm about 90% programmer and 10% designer. As someone that's not a designer, I'm really grateful for websites like ColourLovers — websites that provide you palettes of colors that look good together. Let's pretend for a moment that I do have a good design and I want others to know my palette. MooTools 1.2 has made that a reality.

  • Flashy FAQs Using MooTools Sliders

    I often qualify a great website by one that pay attention to detail and makes all of the "little things" seem as though much time was spent on them. Let's face it — FAQs are as boring as they come. That is, until you go the extra mile and use MooTools sliders.

  • Drag. Drop. Lock.

    I've received dozens of emails about my Six Degrees of Kevin Bacon Using MooTools article. The MooTools in my article contained a lot of conditional code to require correct dropping per the game and many people requested that I simplify the process and just explain the drag, drop, lock process. Ask and you shall receive!

  • Implementing Basic and Fancy Show/Hide in MooTools 1.2

    One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the "Class" class' implement method. Using the implement method, you can add your own methods to custom or core classes.