PrototypeJS based OSX Growl implementation
JavaScript
Switch branches/tags
Nothing to show
Latest commit b382b95 Mar 6, 2013 @jwestbrook ignore DS_Store files
Permalink
Failed to load latest commit information.
css
images
.gitignore
Growler.js
Growler.min.js
README.md

README.md

Prototype.Growler

Mirrored from http://code.google.com/p/kproto/

Overview

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.

Usage

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');
</style>

Examples

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

//Make a default notification happen
grwl.growl("Notification");

//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='http://www.apple.com/ipodtouch/whatsnew.html'>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
grwl.info("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. http://jsfiddle.net/jwestbrook/RehFw/

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 all modern browsers that PrototypeJS and Script.aculo.us support.