jQuery Plugin For Growl-style Notification System - notifications

A tiny and cross browser jQuery plugin for creating Growl-style pop-up notifications that fade in and out from the upper right corner of the web page.

See also:

• Classic Growl-like Notification Plugin For jQuery - Gritter
• Cool Animated Notification Plugin with jQuery - jGrowl
• Tiny jQuery Plugin For Informative Messages In The Browser - Growler
• Growl-like Toast Notification Plugin with jQuery and Font Awesome - MsgPop
• Growl-like Notification Plugin with jQuery and Animate.css - iGrowl
• Animated Notification Plugin For jQuery and Bootstrap - Bootstrap Growl

How to use it:

1. Load the required jQuery notifications' stylesheet in the document's head section.

<link href="path/to/jquery.notifications.css" rel="stylesheet">

2. Load JQuery library and the JQuery notifications' JavaScript at the bottom of the document.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="path/to/jquery.notifications.js"></script>

3. Display a basic growl notification using $.notifications("add") method.

$.notifications('add', {
  title: 'Title',
  content: 'Content goes here',
});

4. More options to customize the growl notification.

// CSS selector
className: 'notification',

// How long the notification lasts
alive: 4000,

// fadeIn animation speed
fadeIn: 600,

// fadeOut animation speed
fadeOut: 800,

// Is sticky?
sticky: false,

// Template
tpl: '<div class="{className}"><div class="{className}-img"><img src="{image}" alt="" /></div><div class="{className}-content"><div class="{className}-title">{title}</div>{content}</div></div>',

// Callbacks
onShow: function () {},
onHide: function () {}

5. You can also pass the options to the growl notification via data-option attributes in the trigger's Html markup.

<button class="trigger" type="button" 
  data-toggle="notification" 
  data-title="Lorem ipsum" 
  data-content="<b>Lorem ipsum</b> dolor sit amet..." 
>
  I'm a trigger button
</button>

6. Public methods.

// Display a notification
jQuery.notifications('add', options);

// Remove the last or a specific notification
jQuery.notifications('remove', 2, onHide);

// Remove all the notifications
jQuery.notifications('removeAll', onHide);

---

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