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.
Include the growler stylesheet. You can also create CSS rules for Growler-notice, Growler-notice-head, and Growler-notice-exit in your own stylesheet.
Create an instance of the Growler class and call the growl method to show a notice.
| Option | Default | Description |
|---|---|---|
| Notice Options | ||
| 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. | |
| Notice Event Options | ||
| created | ||
| destroyed | ||
| Growler Options | ||
| 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. |
Growler has been tested with Safari 3(Mac|Win), Firefox 3(Mac|Win), IE6, IE7, and Opera.
Growler requires prototype 1.6 and scriptaculous 1.8.1 effects