Growl is basically a notification bubble/popup that appears in the top right of your desktop, well known from Mac OS X. Gritter is let’s say the implementation of Growl notifications in web design. Practically, it’s something like the alert() function in JavaScript, but it’s not a modal, looks much better, has more functionality and is fully customizable by parameter settings.
Growl Types of Notifications
As usually for any other jQuery plugin, all you have to do is just upload downloaded Gritter plugin onto your server, load it into your document as stated below and then add the Gritter (Growl Notification Bubble) wherever you like by calling the $gritter.add() method of the Gritter object as example below shows. Parameters passing into the method set type and behaviour of notification bubble.
Gritter Loading
<link rel="stylesheet" type="text/css" href="css/gritter.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.3.2');</script>
<script type="text/javascript" src="js/jquery.gritter.js"></script>
Gritter Calling
$.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a notice!',
// (string | mandatory) the text inside the notification
text: 'This will fade out after a certain amount of time.'
});
As you can see, the Gritter jQuery plugin is easy to use, runs flawlessly in all major browsers (FF 3, FF 3.5, Opera 9, IE7, IE8, Safari 4), problems are only in IE6 – it doesn’t look as good as in other browsers but still works fine. More info, examples and demos can be found on Jordan Boesh’s (Gritter author) site.
Internet Explorer 8 is very good because it is as stable as Opera. I hate the previous versions of IE like IE6 because it hangs frequently. ~
Love this plugin, can’t wait to implement in our web app.
@Rebecca: IE8 is still far from “good”.