MooTools Tutorials

  • MooTools ASCII Art

    I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create.  ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous;  ASCII art is good for a few giggles but that seems to be it.  A new MooTools class has hit the Forge:  MooAsciiArt.  Let's have some fun by turning images and DOM nodes into glorious, character-driven ASCII art.

  • MooTools ScrollSpy, Mobile Devices, JavaScript Scroll Events, and CSS Positioning

    One question I've been asked often is why ScrollSpy and my Go To Top link functionality don't appear to work well on the iPhone, iPad, or any other mobile device.  The problem is simple to identify and easy to fix.  The issue comes down to the way mobile devices view fixed-positioned elements.  Let me explain to you the scenario, problem, and solution to making the "Go To Top" link follow the user as they scroll.

  • Debug Element Modification in MooTools by Monkey Patching Prototypes

    Let's face it:  JavaScript development and CSS modification can be a frustrating process, especially when your web application has loads of JavaScript.  One practice that is very helpful in troubleshooting CSS/JS problems is monkey-patching JavaScript prototypes and adding console statements to figure out what styles are being set on what elements.  Let me show you how you can save valuable time in debugging Element issues.

  • Pro JavaScript with MooTools by Mark Obcena

    With Christmas almost upon us, I wanted to throw a gift idea out there to everyone.  MooTools Contributor Mark Obcena (keeto) has just finished writing his MooTools book:  Pro JavaScript with MooTools.  As you would expect, this book covers not just the basics of MooTools but the advanced concepts behind the code.  Pro JavaScript with MooTools teaches you why MooTools is written the way it is and how to leverage every byte of code to to create efficient, powerful web applications.

  • MooTools Plugins Updates: LazyLoad, LightFace, ScrollSpy, and More!

    What a busy month it's been!  I've spent a good amount of time prepping my Facebook Lightbox clone, LightFace, and working to expand my Dojo Toolkit knowledge.  I thought I'd take a few moments to catch you up on a few of my plugins and some other happenings within the MooTools plugin world.

  • Implement setFocus() on Elements with MooTools

    Every DOM node provides a focus method but most nodes have a tabIndex of -1 which prevents the element from being focused on when clicked, tabbed, focused via JavaScript.  I've been tinkering around with ways to make focusing on any element effortless with varying results.  I tried monkey-patching the prototype which worked well in Safari and Chrome but nowhere else.  I tried doing a tabIndex check but IE complained.  In the end I came up with more of a shortcut method than anything else.

  • LightFace: Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox clone for MooTools.  LightFace and its family of classes work well with iFrames, images, AJAX-requested content, static positioning, and static content.

  • Super-Powered Pseudos with MooTools’ Element.Event.Pseudo

    The MooTools Team and its contributors are always looking for more efficient, creative ways to accomplish common tasks.  Not only is accomplishing the task with an efficient amount of code good enough, but doing so while keeping the code legible and functionality reliable.  I'm confident that we've found such a blend of functionality and code efficiency with MooTools More's Element.Event.Pseudo.  Element.Event.Pseudo meshes event assignment and functionality to provide a quick way to trigger functionality from special pseudo-style events.

  • Supporting the onMessage Event in MooTools

    Yesterday I threw some window.postMessage knowledge right in your face.  The cross frame/window/domain technology that is window.postMessage is really interesting and as IE6 and IE7 fade away, window.postMessage will gain more momentum.  In looking to listen to onMessage events with MooTools, I noticed that message events aren't  handled properly.  The event type is seen as message but the event.data, event.source, and event.origin aren't added to the main-level object — they're relegated to event.event.  It's time to fix that using MooTools custom events.

  • Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and display spots on a given area where a user has clicked.