I’ve been playing around with the MooTools javascript library and just wanted to mention some of my thoughts on it.

What is MooTools?

No, MooTools doesn’t refer to cattle-farming equipment. It’s a lightweight, object-oriented, modular, and cross-browser JavaScript framework that makes Ajax implementation easy and lets you throw in neat visual effects, and that’s just the beginning. You can check out their demos. Why is it called “MooTools” you ask? I have no clue. But coincidentally, the database book holding up my monitor has cows on the cover. Is there some relation between software development and bovines I’m not aware of?

Why MooTools?

Having worked with Prototype and Scriptaculous, I’ll say that MooTools feels quite similar to that venerable combination. Both Prototype and MooTools comes with function that allow for easy DOM manipulation and Ajax calls, but MooTools has got some things going for it that may make it a stronger library, depending on your needs. I’ll list some of those here:

• Lightweight
  The entire MooTools is only 44kb when compressed. Prototype can be compressed down to ~20kb. Scriptaculous is well over 100kb when uncompressed and has only been compressed with varying success.
• Documentation
  MooTools has great documentation with examples. Prototype’s API is decent but Scriptaculous is poorly documented as its wiki isn’t very helpful.
• Robust
  MooTools’ effects are superb and really allow developers to be creative, but I think its strength lies in its robustness. The MooTools development team did a great job making it stable. On more than one occasion, I’ve experienced buggy and choppy effects with Scriptaculous, not so with MooTools. Scriptaculous does seem to have some effects options that MooTools lacks, such as pulsate and shake.

I won’t say which one of these libraries is superior, especially when both are just getting better and better. I will say that if you are looking for a powerful, lightweight, and well documented javascript package, then MooTools is a solid choice.

Here in UD-land, we’ve been working on some projects that require some heavy UI overhaul. One of these projects requires a “filter bar” — a search bar that filters a long list dynamically. We thought that the typical text fields would clash with the style of our design, so we opted for the Safari-esque search field.

Initial Setbacks

Unfortunately, Safari is the only browser currently that (natively) offers this nice-looking search field. What to do, what to do? Well, we could simply fake it, couldn’t we? That is, we could just have a simple text input field and tack on two rounded sides on the end, no? Unfortunately, it’s not that easy. You see, in Safari, when you select an input field, it “glows”:

There were other problems that came up along the way:

• No way to disable glow in Safari, or
• no way to only make the outside glow in Safari (if we were just using a standard text input)
• Safari uses type=”search”. However, that isn’t W3C compliant.

Solution

Well, without going into all the boring details as to what we’ve done, let me just say that we’ve turned it into a generic framework, and you can download it here. A thing to note is that it requires the Mootools framework.

Implementation

We first need to reference the right files. Remember, Mootools go before prettyinput.js.

<script src="mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="prettyinput.js" type="text/javascript" charset="utf-8"></script>


Next, we’ll place the input tag inside the HTML file. Note that the span element is optional — it defines the text inside the search bar.

<label for="YOUR-ID">
<span class="prettyplaceholder">Search</span>
<input id="YOUR-ID" class="prettysearch" type="text" />
</label>


Finally, let’s insert this Javascript snippet in the header.

window.addEvent('domready', function() {
new PrettyInput($('YOUR-ID'));
});


Voila! That’s it!

Compatibility

This is fully compatible with the following browsers:

• IE6
• IE7
• Firefox 2+
• Safari 2

Download PrettySearch (15KB)