PrototypeJS based OSX Growl implementation
Switch branches/tags
Nothing to show
Latest commit b382b95 Mar 6, 2013 @jwestbrook ignore DS_Store files
Failed to load latest commit information.


Mirrored from


Growler is a Prototype JavaScript Framework based class that displays unobtrusive notices on a page. It works like the OSX 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.


Include the growler.js on your page after prototype.js and scriptaculous.js. Also make sure to link or import the CSS file for the default styling and themes. Please feel free to write your own styling for div.Growler-notice, div.Growler-notice-head, and div.Growler-notice-exit.

<script src="prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="scriptaculous.js" type="text/javascript" charset="utf-8"></script>
<script src="Growler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="Growler.css" />
<!--    OR    -->
<style type="text/css">
@import url('Growler.css');


//Create an instance of the Growler Class
var grwl = new Growler();

//Make a default notification happen

//Notice with header
grwl.growl("...with header", {header: "Growler Notice"});

//Notice that stays longer
grwl.growl("Long lasting notice (20s)", {life: 20});

//Sticky notice that stays till dismissed
grwl.growl("Sticky notice", {sticky: true});

//Candybar Theme
grwl.growl("Candy is good", {header: "Candybar Theme", className: "candybar", sticky: true});

//Plain Theme
grwl.growl("Visit <a>kProto</a> for more Prototype classes.", {className: "plain"});

//MacOSX Theme
grwl.growl("The funnest iPod ever. Millions of songs. Thousands of movies. Hundreds of games. <a target='_blank' href=''>Learn more</a>", {header: "iPod Touch", className: "macosx", sticky: true});

//AtWork Theme
grwl.growl("This is a test to see how well the theme handles text that is long. It should stretch height-wise.", {header: "At Work Theme", className: "atwork"});

//Important Notice"Something good happended", {life: 10});

//Warning Notice
grwl.warn("Take heed", {life: 10});

//Critical notice
grwl.error("Something bad happened", {life: 10});

//Event handling
grwl.growl("Notice w/Events", {
	created: function(){
		$("noticeevents").innerHTML += "<div>Notice created...</div>";
	destroyed: function(){
		$("noticeevents").innerHTML += "<div>...Notice destroyed</div>";

Real world example can be found here.


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.


Growler has been tested with all modern browsers that PrototypeJS and support.