Growl-Style Notifications Using MooTools Roar

When I think of premier MooTools plugin developers, Harald "digitarald" Kirschner is usually one of the first people that come to mind. Harald has built some of MooTools' most popular plugins, including AutoCompleter, FancyUpload, and History Manager. My favorite plugin created Harald is Roar -- a Growl clone built with MooTools.

The CSS

Roar comes packaged with a default CSS file that you may customize to your heart's content. I like Harald's default formatting -- it looks very much like Growl.

The MooTools Usage

window.addEvent('domready',function() {
	var roar = new Roar({
		position: 'upperRight'
	});
	$('submit-button').addEvent('click',function(){ 
		roar.alert('MooTools FTW!!','But you already know that.'); 
	});
});

The above is as basic as it gets. Harald did a great job picking the best default settings -- I usually only update the position to be in the top-right corner of the browser. The alert method adds an item to the queue. Be sure to check out the Roar class' source to see the wealth of options the plugin provides.

So when's a good time to use Roar? I usually use Roar when doing AJAX requests. Take the following as an example:

var roar = new Roar({
	position: 'upperRight'
});
var myRequest = new Request({
	url: 'some-url.php',
	method: 'post',
	data: {
		mootools: 'ftw'
	},
	onRequest: function() {
		roar.alert('Submitting your data','Please wait one moment.');
	},
	onSuccess: function() {
		roar.alert('Success!','Your data was successfully saved.');
	},
	onFailure: function() {
		roar.alert('Ooops!','Your data could not be saved.  Please try again.');
	}
});

I add alerts during the Request's request, success, and failure events. That way the user always knows what's happening.

Those of you that work on Macs know how great Growl is. Growl is an unobtrusive, welcomed method of receiving notifications. Take the power of Growl to your website with Roar!