While this is a very basic piece of code it adds a very nice effect to any item you choose. The MooTools Fader Class will fade any item to a specified opacity and fade it back to a specified opacity.

Usage

new Fader(elements);

Parameters and Options

elements: Parameter. This is a CSS selector that will be used to select your items.
fadeTo: Option. This is the decimal value that your item will be faded to. E.G. 0.3
fadeFrom: Option. This is the decimal value that your item will be faded back to. E.G. 1
duration: Option. The speed of the animation in milliseconds. E.G. 250
transition: Option. The transition of the animation. E.G. Fx.Transitions.Sine.easeOut

Demo and Download

You can see it in action here.
Download a zip here.

This is a small piece of code that is mostly the brain child of the incredible David Walsh. His version is written in MooTools and you can see it here. There are a few differences however, I removed some of the basic form validation, I set up a Gravatar function to be called onBlur rather then keyUp because the flashing Gravatar on each key stroke just got really annoying. While I prefer MooTools I did this in jQuery because:

1. David Walsh already did an excellent MooTools version.
2. Depending on its popularity I might make this into a Wordpress plugin. And since most themes and Wordpress are already using jQuery I figured that was the largest market.
3. Some of his commenters were requesting a jQuery version.

Demo and Download

You can see it in action here.
Download a zip here.

So I’ve been wanting to write a class like this for a while now and I finally got around to it. It creates a content slider. That being said a content slider could be a number of things these days but, this particular one creates a slider that manipulates the position of the content in a div element. The class constructor takes three arguments and can be called using:

Usage

new ContentSlider(element, sliderTrack, sliderKnob, options);

Parameters

The element parameter needs to be an element that is wrapped within a viewport div. The viewport div’s width will be what is seen. While the element div’s width will be set using Javascript. In order for this to happen your item_list li element needs to have a set width. While the getSize() method of MooTools works dynamically in Firefox it only counts set properties in Safari and Internet Explorer. Dear MooTools Team, if it is possible please fix this.

The sliderTrack parameter is the background of the slider. The track if you will. It will wrap around the sliderKnob.

The sliderKnob parameter is the actual knob of the slider. The knob or controller needs to have a set width or else it won’t work in Safari or IE.

The option for itemList is very important as well. It takes an ID of an element and is absolutely necessary. By default it looks for a ul tag with and id of ‘item_list’.

Important thing about this class is it absolutely requires that your HTML markup is properly set up. While something with this many variants is difficult to write a blueprint for, I tried anyway. Reason for this is I have seen this done a lot, mostly in jQuery. I wanted to show that the same effect could be done in a reusable manner with minimal code. I hope someone out there is able to use this.

jQuery Users

For those of you who are looking to accomplish this effect in jQuery check this out.

Demo and Download

You can see it in action here.
Download a zip here.

Hopefully the plug-ins and classes I write are simple enough to figure out and manipulate. Its an extremely simple and customizable little testimonial rotator that also supports HTML. So yes your quotes can have links, logos or even avatars. It will support as many quotes or testimonials you may need. The options that can be set are speed (number), json (JSON file URL), and what quote you want to start from (number).

If you have any feature requests, questions, or issues please drop me a comment and I would love to help you out. Here are the details and usage for each of the particular frameworks.

jQuery

$('#container').quotator();

MooTools

var myQuotes = new Quotator('container');

The JSON

By default it looks for a file called quotes.js which is a simple JSON file that looks something like this:

{"quotes":
[{
"quote" : "Quote 1",
"author" : "Author 1"
},{
"quote" : "Quote 2",
"author" : "Author 2"
}]}

Demo and Download

You can see it in action here.
Download a zip for jQuery here.
Download a zip for MooTools here.