MooTools Tutorials
Search Type Options with MooTools
Advanced search engines like Google, Yahoo!, and Bing have discovered the obvious: one type of search isn't good enough. The big search engines offer web search, video search, code search, blog search, image search, and any other type of search you can think of. Of course they could use different search boxes on different pages but that's annoying. Using a bit of JavaScript we can consolidate all of our search types into one box.
Record Text Selections Using MooTools or jQuery AJAX
One technique I'm seeing more and more these days (CNNSI.com, for example) is AJAX recording of selected text. It makes sense — if you detect users selecting the terms over and over again, you can probably assume your visitors are searching that term on Google, Yahoo, etc. I've duplicated this functionality using my favorite JavaScript library, MooTools, and another JavaScript library, jQuery.
Create a Sprited Navigation Menu Using CSS and MooTools
CSS sprites are all the rage these days. And why shouldn't be? They're easy to implement, have great upside, and usually take little effort to create. Dave Shea wrote an epic CSS sprites navigation post titled CSS Sprites2 - It’s JavaScript Time. In his post he outlined a method for enhancing the CSS sprite menu with jQuery. I loved his post so much that I converted his jQuery CSS sprites menu to MooTools.
Event Delegation with MooTools
Events play a huge role in JavaScript. I can't name one website I've created in the past two years that hasn't used JavaScript event handling on some level. Ask yourself: how often do I inject elements into the DOM and not add an event to them? For me it's very rare. For this reason I'm proud and excited for the release of MooTools 1.2.4's Event.Delegation code.
Fancy FAQs with MooTools Sliders: Version 2
A little over a year ago I authored a post titled Fancy FAQs with MooTools Sliders. My post detailed a method of taking boring FAQs and making them more robust using the world's best JavaScript framework: MooTools. I've taken some time to improve my original code for optimal performance and functionality.
Dynamically Create Charts Using MooTools MilkChart and Google Analytics
The prospect of creating graphics charts with JavaScript is exciting. It's also the perfect use of JavaScript — creating non-essential features with unobtrusive scripting. I've created a mix of PHP (the Analytics class), HTML, and MooTools JavaScript that will connect to Google Analytics, create an HTML table with the statistics for a given month, and use MooTools MilkChart to colorfully chart them out.
Form Element AJAX Spinner Attachment Using MooTools
Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an AJAX request to grab the states but wont show any indicator to the user that something is happening. We're going to use MooTools to add an AJAX spinner image next to form fields that perform such AJAX requests.
Save Web Form Content Using Control + S
We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it frequently. Here's how to listen for "CONTROL+S" using MooTools.
MooTools Kwicks Plugin
I wrote a post titled Get Slick with MooTools Kwicks ages ago. The post was quite popular and the effect has been used often. Looking back now, the original code doesn't look as clean as it could. I've revised the original Kwicks code so that Kwicks is laid out in the form of a standard MooTools plugin.