jGrowl is a nifty little jQuery library that creates unobtrusive messages in the browser. It works in a similar way to Growl on Mac OS X.
It enables you to create great looking notifications from your website without it getting in the way. There are different styled examples including the iPhone notifications design. You can set the time delay on the notification staying on the screen or if you want it to stay. The position of the notification can also be set and an animation when loading in the notification.

How to initiate jGrowl

Starting using jGrowl is pretty straight forward, simply include the js files and then call jGrowl as you would any jQuery class you have plugged in. The most simple example of how to do this is:

$.jGrowl("Hello world!");

Further resources

More comprehensive information on how to use and extend jGrowl can be found at Stan Lemon’s project site (http://stanlemon.net/projects/jgrowl.html).

jGrowl Options:

I have included the options for use with jGrowl below, but these can also be found on the plugin site.

Option Name: Default Value: Explanation:
header empty string Optional header to prefix the message, this is often helpful for associating messages to each other.
sticky false When set to true a message will stick to the screen until it is intentionally closed by the user.
glue after Designates whether a jGrowl notification should be appended to the container after all notifications, or whether it should be prepended to the container before all notifications. Options are after or before.
position top-right Designates a class which is applied to the jGrowl container and controls it’s position on the screen. By Default there are five options available, top-left, top-right, bottom-left, bottom-right, center. This must be changed in the defaults before the startup method is called.
theme default A CSS class designating custom styling for this particular message.
corners 10px If the corners jQuery plugin is include this option specifies the curvature radius to be used for the notifications as they are created.
check 1000 The frequency that jGrowl should check for messages to be scrubbed from the screen.
life 3000 The lifespan of a non-sticky message on the screen.
speed normal The animation speed used to open or close a notification.
easing swing The easing method to be used with the animation for opening and closing a notification.
closer true Whether or not the close-all button should be used when more then one notification appears on the screen. Optionally this property can be set to a function which will be used as a callback when the close all button is clicked.
closeTemplate × This content is used for the individual notification close links that are added to the corner of a notification.
closerTemplate <div>[ close all ]</div> This content is used for the close-all link that is added to the bottom of a jGrowl container when it contains more than one notification.
log function(e,m,o) {} Callback to be used before anything is done with the notification. This is intended to be used if the user would like to have some type of logging mechanism for all notifications passed to jGrowl. This callback receives the notification’s DOM context, the notifications message and it’s option object.
beforeOpen function(e,m,o) {} Callback to be used before a new notification is opened. This callback receives the notification’s DOM context, the notifications message and it’s option object.
open function(e,m,o) {} Callback to be used when a new notification is opened. This callback receives the notification’s DOM context, the notifications message and it’s option object.
beforeClose function(e,m,o) {} Callback to be used before a new notification is closed. This callback receives the notification’s DOM context, the notifications message and it’s option object.
close function(e,m,o) {} Callback to be used when a new notification is closed. This callback receives the notification’s DOM context, the notifications message and it’s option object.
animateOpen { opacity: ‘show’ } The animation properties to use when opening a new notification (default to fadeOut).
animateClose { opacity: ‘hide’ } The animation properties to use when closing a new notification (defaults to fadeIn).