jQuery Plugin For Growl-style Notification System - notifications
File Size: | 9.05 KB |
---|---|
Views Total: | 1449 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.