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
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    MooTools: Set Style Per Media

    I'd bet one of the most used MooTools methods is the setStyle() method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools' setStyle() method is that it sets the specific style for all medias.

  • By
    Creating the Treehouse Frog Animation

    Before we start, I want to say thank you to David for giving me this awesome opportunity to share this experience with you guys and say that I'm really flattered. I think that CSS animations are really great. When I first learned how CSS...

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!