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). |