MsgGrowl - MadeByAmp

MsgGrowl is a clean CSS3 notification system for alerting users to site information, errors, warnings, and successes.

To get started with MsgGrowl, add the msgGrowl.css stylesheet to your document:

<link rel="stylesheet" href="msgGrowl.css" type="text/css" charset="utf-8" />

Also add the MsgGrowl javascript file to your document:

<script src="msgGrowl.js"></script>

Then add the images folder contained in this download to your project and make sure all the image paths in the msgGrowl.css file are correct.

For support email the author through his Code Canyon author page http://codecanyon.net/user/MadeByAmp

---

Example/Usage

Basic

$.msgGrowl ({
	title: 'Header' // Optional
	, text: 'Lorem ipsum dolor sit amet, consectetur.'
});

Basic

---

Types

$.msgGrowl ({
	type: 'info'
	, title: 'Header'
	, text: 'Lorem ipsum dolor sit amet, consectetur.'
});

Info Success Warning Error

---

Position

$.msgGrowl ({
	title: 'Header'
	, text: 'Lorem ipsum dolor sit amet, consectetur.'
	, position: 'bottom-right'
});

Top Left Top Center Top Right Bottom Left Bottom Center Bottom Right

---

Sticky

$.msgGrowl ({
	title: 'Header'
	, text: 'Lorem ipsum dolor sit amet, consectetur.'
	, sticky: true
});

Sticky

---

Callback

$.msgGrowl ({
	title: 'Header'
	, text: 'Lorem ipsum dolor sit amet, consectetur.'
	, onOpen: function () {
		// Callback
	}
	, onClose: function () {
		// Callback
	}
});

Callback

---

Options

Option Name	Default Value	Explanation
type	empty string	Designates the type of notication being displayed. Options are an empty string, info, success, error, warning.
title	empty string	Optional title which is displayed above the notification text.
text	empty string	Required text message for notification.
lifetime	6500	Time in milliseconds a non-sticky notification will stay on the screen.
sticky	false	True/false. When set to true the notification will stay on the screen until closed by the user.
position	bottom-right	Designates the region notifications will display in. Options are top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.
closeTrigger	true	True/false. When set to true the notification will display a small x in the corner allowing the user to manually close the notification.
onOpen	function () {}	Callback function before the notification is opened.
onClose	function () {}	Callback funciton after the notication has been removed.