Growl-like Notification Plugin with jQuery and Animate.css - iGrowl

iGrowl is a lightweight yet robust jQuery plugin to display Growl-like responsive notification boxes with cool CSS3 animations based on animate.css. The plugin comes with 4 icon font pack which allows to add nice and intuitive icons to your notification messages.

See also:

• Tiny jQuery Plugin For Informative Messages In The Browser - Growler
• Animated Notification Plugin For jQuery and Bootstrap - Bootstrap Growl
• Cool Animated Notification Plugin with jQuery - jGrowl

Basic Usage:

1. Include the required jQuery library and animate.css into your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css"> 

2. Include at least one of the following icon stylesheets into your document's head section.

<link rel="stylesheet" href="stylesheets/font css/vicons.css">
<link rel="stylesheet" href="stylesheets/font css/feather.css">
<link rel="stylesheet" href="stylesheets/font css/steadysets.css">
<link rel="stylesheet" href="stylesheets/font css/linecons.css">

3. Include the jQuery iGrowl plugin's JS and stylesheet into the document.

<link rel="stylesheet" href="stylesheets/igrowl.min.css">
<script src="javascript/igrowl.min.js">

4. Call the plugin to create a basic notification with custom messages.

$.iGrowl({
  message: "Your message goes here"
})

5. Default settings.

// Type of alert, available options are: 
// info, success, notice, error, simple 
// For a more saturated/deeper color style, add the -sat suffix, eg: 
// info-sat, success-sat, notice-sat, error-sat
type :   'info',

// Alert title (optional)
title : null,

// Alert message (optional)
message : null,

// Icon class (optional), in the form of iconPack-iconName
icon :   null,

// Size of alert - either regular or small
small : false,

// Delay before alert auto-dismisses (optional). Set to 0 for persistence.
delay : 2500,

// Spacing between alerts
spacing :  30,

// Vertical placement
placement : {
  x :   'right',
  y :'top'
},

// x and y offset from edge of window
offset : {
  x :   20,
  y :   20
},

// Enable or disable animation
animation :   true,

// Alert animation on enter
animShow : 'bounceIn',

// Alert animation on exit
animHide : 'bounceOut',

// Function to run once enter animation begins
onShow : null,

// Function to run once enter animation completes
onShown : null,

// Function to run once exit animation begins
onHide : null,

// Function to run once exit animation completes
onHidden : null

---

This awesome jQuery plugin is developed by catc. For more Advanced Usages, please check the demo page or visit the official website.