stanlemon.net : jgrowl

jGrowl

Growl

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. Also check out the private-message module which uses jGrowl to deliver messages.

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

Check out a modification for webSPELL to use jGrowl here.

Are you a WordPress user? LiveGets, a plugin to update any WordPress widget in real time uses jGrowl.

Is your open source project 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.This must be changed in the defaults before the startup method is called.
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. This must be changed in the defaults before the startup method is called.
closeTemplate	×	This content is used for the individual notification close links that are added to the corner of a notification. This must be changed in the defaults before the startup method is called.
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. This must be changed in the defaults before the startup method is called.
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.2.4

Fixed IE bug with the close-all button
Fixed IE bug with the filter CSS attribute (special thanks to gotwic)
Update IE opacity CSS
Changed font sizes to use "em", and only set the base style

Changes in 1.2.3

The callbacks no longer use the container as context, instead they use the actual notification
The callbacks now receive the container as a parameter after the options parameter
beforeOpen and beforeClose now check the return value, if it's false - the notification does not continue. The open callback will also halt execution if it returns false.
Fixed bug where containers would get confused
Expanded the pause functionality to pause an entire container.

Changes in 1.2.2

Notification can now be theme rolled for jQuery UI, special thanks to Jeff Chan!

Changes in 1.2.1

Fixed instance where the interval would fire the close method multiple times.
Added CSS to hide from print media
Fixed issue with closer button when div { position: relative } is set
Fixed leaking issue with multiple containers. Special thanks to Matthew Hanlon!

Changes in 1.2.0

Added message pooling to limit the number of messages appearing at a given time.
Closing a notification is now bound to the notification object and triggered by the close button.

Changes in 1.1.3

Not available.

Changes in 1.1.2

Added iPhone styled example.
Fixed possible IE7 bug when determining if the ie6 class should be applied.
Added template for the close button, so that it's content could be customized.

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