How to add pizzazz to your browser UI without spending money

When it comes to adding some pizzazz to your browser user interfaces using JavaScript you can either build your own effects library from scratch or use one that has already been built. “Ah!” you might expostulate, “then I’d have to spend money.” Today I have the first of a series of UI building components that cost nothing and are beautifully engineered.

Our first library is called moo.fx published by Mad4Milk, an Italian Web design firm.

Moo.fx is a tiny JavaScript library weighing in at a mere 3KB of code. The publishers describe it as “easy to use, fast, cross-browser, standards compliant, [and] provides controls to modify Height, Width and Opacity.”

A really cool thing about moo.fx is that it has built-in checks so that when a user has at it and hits the library with a stream of clicks the code won’t break.

Despite its diminutive size, moo.fx covers a lot of ground, including toggling of opacity, height and width; fade while resizing width and height; toggled and custom resizing of objects; and text resizing. The demos give you an idea of what can be accomplished.

Moo.fx is built on top of a JavaScript framework called Prototype created by Sam Stephenson, which was designed to simplify development of dynamic Web applications. This framework has been the foundation of a number of other projects that I plan to cover in the near future. Note that this is not a tool to be delved into lightly as it has hardly any documentation and consists of very dense code.

Moo.fx is slightly easier to understand despite also being thin on documentation, but the author has written a tutorial with a demo. That and the demos provide a pretty good introduction that even a novice JavaScript programmer should be able to get going with.

As I noted at the beginning, moo.fx is free and is released under the MIT license as is Prototype.