Growl-like Notification Plugin with jQuery and Animate.css - iGrowl
File Size: | 339 KB |
---|---|
Views Total: | 2220 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.