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.


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'
		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 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Face Detection with jQuery

    I've always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it's voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I...

  • By
    MooTools Typewriter Effect Plugin

    Last week, I read an article in which the author created a typewriter effect using the jQuery JavaScript framework. I was impressed with the idea and execution of the code so I decided to port the effect to MooTools. After about an hour of coding...


  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 ( 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:


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