Treehouse

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!

ydkjs-1.png

Recent Features

  • Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

Incredible Demos

  • Introducing MooTools LazyLoad

    Once concept I'm very fond of is lazy loading. Lazy loading defers the loading of resources (usually images) until they are needed. Why load stuff you never need if you can prevent it, right? I've created LazyLoad, a customizable MooTools plugin that...

  • PHP Woot Checker – Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

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

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