stanlemon.net : jgrowl

jGrowl

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X's Growl Framework works.

jGrowl Resources:

Example Usage and Samples:

// Sample 1
$.jGrowl("Hello world!");
// Sample 2
$.jGrowl("Stick this!", { sticky: true });
// Sample 3
$.jGrowl("A message with a header", { header: 'Important' });
// Sample 4
$.jGrowl("A message that will live a little longer.", { life: 10000 });
// Sample 5
$.jGrowl("A message with a beforeOpen callback and a different opening animation.", {
    beforeClose: function(e,m) {
        alert('About to close this notification!');
    },
    animateOpen: {
        height: 'show'
    }
});

Included in the download package is a more extensive set of examples for jGrowl usage.

Support jGrowl:

jGrowl is free and open source, it's distributed under the MIT and GPL licenses - which means you can pretty much do whatever you want with it. If you'd like to support jGrowl with a donation you may do via PayPal:

jGrowl Users:

Are you a Drupal user? Check out the Drupal module for jGrowl.

Are you an iGoogle user? Betwittered a twitter client for your favorite search engine start page uses jGrowl.

Are you using jGrowl? Drop me a line and I'll add a link to your project here!

jGrowl Options:

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

Changes in 1.1.1

Fixed CSS styling bug for ie6 caused by a mispelling
Changes height restriction on default notifications to min-height
Added skinned examples using a variety of images
Added the ability to customize the content of the [close all] box
Added jTweet, an example of using jGrowl + Twitter

Changes in 1.1.0

Multiple container and instances.
Standard $.jGrowl() now wraps $.fn.jGrowl() by first establishing a generic jGrowl container.
Instance methods of a jGrowl container can be called by $.fn.jGrowl(methodName).
Added glue preferenced, which allows notifications to be inserted before or after nodes in the container.
Added new log callback which is called before anything is done for the notification.
Corner's attribute are now applied on an individual notification basis.

Changes in 1.0.4

Various CSS fixes so that jGrowl renders correctly in IE6.

Changes in 1.0.3

Fixed bug with options persisting across notifications
Fixed theme application bug
Simplified some selectors and manipulations.
Added beforeOpen and beforeClose callbacks
Reorganized some lines of code to be more readable
Removed unnecessary this.defaults context
If corners plugin is present, it's now customizable.
Customizable open animation.
Customizable close animation.
Customizable animation easing.
Added customizable positioning (top-left, top-right, bottom-left, bottom-right, center)

Changes in 1.0.2

All CSS styling is now external.
Added a theme parameter which specifies a secondary class for styling, such that notifications can be customized in appearance on a per message basis.
Notification life span is now customizable on a per message basis.
Added the ability to disable the global closer, enabled by default.
Added callbacks for when a notification is opened or closed.
Added callback for the global closer.
Customizable animation speed.
jGrowl now set itself up and tears itself down.

Changes in 1.0.1:

Removed dependency on metadata plugin in favor of .data()
Namespaced all events

Changes in 1.0.0:

Initial non-public release, no notes.

stanlemon•net