# 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.'
    });

### Types

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

### Position

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

### Sticky

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

### Callback

    $.msgGrowl ({
    	title: 'Header'
    	, text: 'Lorem ipsum dolor sit amet, consectetur.'
    	, onOpen: function () {
    		// Callback
    	}
    	, onClose: function () {
    		// 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.