Updated Nov 09, 2008 by xsokev
Labels:	Featured, Phase-Implementation

Growler

Growler is a prototype js class that displays notices on a web page.

Overview

Growler is a Prototype JavaScript Framework based class that displays unobtrusive notices on a page. It works like the OS X Growl. It supports themes by using CSS styling. Also options can be passed to modify how long the notice is displayed or whether it remains displayed until the user closes it.

Growler also supports observing two events: notice:created and notice:destroyed. These can be passed in as options to the notice or attached to the returned notice object.

Usage

Include the Growler.js on your page after prototype.js. I use the ProtoPacked which is included in the download. Otherwise, scriptaculous effects must be included before the Growler class.

<script src="prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="Growler.js" type="text/javascript" charset="utf-8"></script>

Examples

Examples can be found here. Growler Examples

Options

Notice Options	Default	Description
header		The title that is displayed for the notice.
speedin	0.3	The speed in seconds in which the notice is shown.
speedout	0.5	The speed in seconds in which the notice is hidden.
life	5	The number of seconds in which the notice remains visible.
sticky	false	Determines if the notice should always remain visible until closed by the user.
className		An optional CSS class to apply to notice.
created		event that is triggered when the notice is created and displayed
destroyed		event that is triggered when the notice is hidden and destroyed
Growler Options	Default	Description
location	tr (top right)	The location of the growler notices. This can be tr(top-right), br(bottom-right), tl(top-left), bl(bottom-left), tc(top-center), bc(bottom-center)
width	250px	The width of the growler notices by default depends on the width of the growler container.

Compatibility

Growler has been tested with Safari 3, Firefox 3, IE6, IE7, and Opera.

Requirements

Growler requires Prototype 1.6 and Scriptaculous effects

Comment by cedric.lahouste, Jan 29, 2009

Nice one! I've just added a offsetX, offsetY parameter. Growler was on my bottom bar; unable to click on it ;)