Animated Notification Plugin For jQuery and Bootstrap - Bootstrap Growl
File Size: | 7.91 KB |
---|---|
Views Total: | 24084 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery notification plugin that makes use of Boostrap's alerts to create animated informative messages in your web/app page, similar to the Mac OS X's 'Growl' notification system.
See also:
- Tiny jQuery Plugin For Informative Messages In The Browser - Growler
- Cool Animated Notification Plugin with jQuery - jGrowl
Basic Usage:
1. Include jQuery javascript library together with Twitter Bootstrap's files in the page.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
2. Include jQuery Bootstrap Growl plugin after jQuery library.
<script src="jquery.bootstrap-growl.js"></script>
3. Create the notification messages in the javascript.
$.bootstrapGrowl("Your Messages", // Messages { // options type: "info", // info, success, warning and danger ele: "body", // parent container offset: { from: "top", amount: 20 }, align: "right", // right, left or center width: 250, delay: 4000, allow_dismiss: true, // add a close button to the message stackup_spacing: 10 });
Change logs:
2016-12-27
- JS update
2014-12-11
- Bootstrap 3.x compatibility
- add class "alert-dismissible" when allow_dismis = true and change close button pattern
This awesome jQuery plugin is developed by ifightcrime. For more Advanced Usages, please check the demo page or visit the official website.