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
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Duplicate DeSandro’s CSS Effect

    I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate:  use some simple JavaScript goodness to inject unicorns into their page.

  • By
    Build a Calendar Using PHP, XHTML, and CSS

    One of the website features my customers love to provider their web users is an online dynamic calendar. An online calendar can be used for events, upcoming product specials, memos, and anything else you can think of. I've taken some time to completely...

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!