This is a relatively simple concept and is nothing to elaborate but I wanted to share a small piece of code that will take every link with the class of “ajax” and access it using AJAX instead of actually going to that page. This using the same Request instance which will keep it optimized and manageable. MooTools is going to make this nice and easy on us…

Usage

JavaScript

var ajax_request = new Request(
{
	onSuccess: function(responseText, responseXML)
	{
		$('message').set('html', responseText);
	}
});

$$('.ajax').each(function(item){
	var url = item.get('href');
	item.addEvent('click', function(event){
		ajax_request.options.url = url;
		ajax_request.send();
		return false;
	});
});

HTML

Sent Via AJAX
Also Sent Via AJAX
I am filled with the results of our AJAX requests.

Its incredibly simple so no demo for this. The important concept here is that we are using the same request and pulling the href attribute base on a class selection. So changing something from AJAX to regular is as easy as adding or removing the class “ajax”. Pretty cool eh?

In my attempt to use MooTools on new projects with other developers, share MooTools with other developers, or just releasing a MooTools class; I’ve come across the same complaints about this incredible framework.

MooTools Complaints

Poor Documentation

While its true MooTools is poorly documented compared to other frameworks it is still worth learning and with people like Aaron Newton or David Walsh. The information to learn it is there its just not necessarily on the MooTools site.

Poor Demos

Not much I can say about this but the demo library on MooTools.net was narrow at best. Hopefully they plan to improve this officially in the future. For now though the web community is really pitching in.

No Official Plugin Library

MooTools admits this is a lacking feature in the community of the framework and is setting out to release the Forge with MooTools 2

The Learning Curve

It’s true MooTools is a bit tougher to learn then jQuery but you will be a better programmer for it. It is a very robust framework with a huge potential and plenty of power as it is now.

Backwards Compatibility

A bunch of developers I had converted to MooTools was during 1.11. And when MooTools release 1.2. It broke a lot of their code even things they had copied straight from the MooTools demos. MooTools has learned from this mistake and has promised all future releases will be backwards compatible.

No UI Library

I’ve never really been to hurt about this myself as I feel things like jQuery’s UI library are complete overkill when all you need is progress bar. Either way MooTools is developing a UI library called MooTools ART

Plugins

This is a large misconception. I’ve been hard pressed to find a plugin that someone hasn’t written or translated to MooTools.

The Point

The point of this is not to trash MooTools but to let people know the MooTools team is hard at work fixing a lot of these complaints. I’ve seen jQuery gaining serious ground since its release for its community and small learning curve. I’m a huge fan of MooTools and its object oriented approach. I wanted to clear things up on what MooTools is doing about them. Learn MooTools. It’s an incredible framework.

Let it be known. This class doesn’t have a lot of options but it is fairly dynamic. If people actually use this class I will make it more customizable to the options and not just the class itself.

While this is nothing special and there are plenty of great MooTools graphing systems out there I wanted to build one that animated up and down as well as side to side. I’m sure there are others that do this but I was curious to learn how and dove in. Any advice, tips, improvements, or feedback is greatly appreciated.

Usage

JavaScript

var myGraph = new Grapher('element_id',{
	json : 'json.php',
	total : '100'
});

JSON

The JSON productivity number in this case is based on 100 but this class will support any value. When you initiate your graph you set the total option to calculate the percentage. If you are just comparing to other employees you would take the top sells man and calculate the percentage on a bell curve.

{"graph": [ { "name" : "insert name", "key" : "1", "productivity" : "92" } ] }

CSS

The element container that you pass into the initiating function of this graph will be the total set width for the bars at 100%. Make sure you keep that in mind.

.graph{
	/* This contains everything in a particular object. The name, and the bar.*/
}

.graph_bar{
	/* This is the actual bar the width changes based on the JSON calculated percentage. You need a background image or color to show the bar as well as a height. */
}

.label{
        /* This is just the place the name is inserted. */
}

Demo and Download

Please wait at least 5 seconds to see the graph refresh and animate. These numbers are being dynamically created via PHP into a JSON file.

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

Credits

Big thanks to these guys:

• Gabe Barrientos – Original Idea
• David Walsh – Converting percentage to pixels.

This is a concept based on the idea that maybe you want a link to go to more then one place. Multiple links if you will.

For Example: A company has a page full of images of employees that work for them with links to their Facebook accounts or personal websites. What if I’m not a member of Facebook? What if I prefer following them on Twitter? Or maybe I want all of those options. Well this is where my idea came into play. It works like a right-click menu (sort of). When you click the image a styled menu appears with all of the links available. If you leave the menu fades out and lets you continue browsing as normal. This is completely customizable and style able so please feel free to make it blend with your site.

Usage

JavaScript

var myMultipleLink = new MultipleLinks('element_id',{
	'links' : [
			['url','target','title'],
			['url','target','title'],
			['url','target','title']
	]
});

CSS

.multiple_link{
	/* This is the ul */
}

.multiple_link_item{
	/* This is the actual  li item */
}

Obviously those are injected with the actual anchor tags and those can be selected using standard selectors.

Demo and Download

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

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.