Growl-Style Notifications Using MooTools Roar

By  on  
MooTools Roar - Growl

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!

Recent Features

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Control Element Outline Position with outline-offset

    I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...

  • By
    MooTools TextOverlap Plugin

    Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...

Discussion

  1. Dude, whats with you and Christina Ricci? She is average at best IMO. :)

    Anyways, as always, excellent tuts. Keep it up.

  2. @Ricci: Watch yourself.

  3. I couldn’t agree more! The Harald Kirschner “Growl” class is an essential part of pretty much all the code that I do now, at least for all back-office parts.
    I can’t remember what life was like without it :)

  4. Marc

    Cross-browser rounded corners would definitely be FTW :)

    The jQuery alternative (http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/) is pretty cool, too :)

  5. @Marc: Cross-browser rounded corners are a lot of extra code and elements for a minimal UI enhancement. I rather stick to graceful degradation and keep the CSS easy to customize. Keeps the DOM slick, the CSS readable and the styling easy to change.

    Thanks for the feature and the kudos David, much appreciated :)

    Small errata: the example has 2 onSuccess events, should be onFailure.

  6. Marc

    @Harald – Very true, of course. Would be nice to have the choice though, as I actually prefer your Roar to the Gritter I linked to – but then I guess the main reason is because it’s compact!

  7. Christian

    I’m working on a project at the moment where I could really need that, but after the page has loaded and with an additional delay of for e.g. 5 seconds – not a click event. Any ideas?

  8. Christian

    I’m working on a project at the moment where I could really need that, but after the page has loaded and with an additional delay of for e.g. 5 seconds – not a click event. Any ideas?

  9. Christina Ricci box says… don’t “event” get me started.

    LOL, I know you meant “even”, but “event” is funny considering the Javascript code…

    Unless that was on purpose. :)

  10. Dailce

    It would be great if you could port this to mootools 1.3

  11. André

    Hey there,

    you can find an upgrade for newer mootools versions here: https://gist.github.com/sunng87/1516568

    Bye.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!