Minimal Notification Bar Plugin For jQuery and Bootstrap 3 - bootbar

Bootbar is a lightweight and easy to use jQuery plugin styled with Bootstrap 3 that creates various types of stacked notification bars with simple slide away animations.

See also:

• Animated Notification Plugin For jQuery and bootstrap - bootstrap Growl
• jQuery Event Based Notification Plugin For bootstrap - BS-Alerts
• JS Notification Plugin For bootstrap or jQuery UI - Pines Notify

How to use it:

1. Include the Twitter's bootstrap 3 framework in the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

2. Include the jQuery bootbar plugin after jQuery javascript library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootbar.js"></script>

3. Create notifications in the javascript.

<script>
$(document).ready(function(){
$.bootbar.info("This is a standard info bar.");
$.bootbar.warning("This warning is stacked underneath the original info bar.");
$.bootbar.danger("This is a standard danger bar.");
$.bootbar.success("This is a standard success bar.");
});
</script>

4. The sample CSS to place the notification bars.

.alert-messages {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 10000000;
}

5. Available options and callback functions.

<script>
$(document).ready(function(){
$.bootbar.info("This <a href=\"#\">info bar<\/a>.", {
autoDismiss: false,      // Don't automatically dismiss the bar.
autoLinkClass: true,     // onDraw callback
barType: alertTypes[0],  // info
dismissTimeout: 3000,    // 3 Seconds
dismissEffect: "slide",  // Slide away: (slide, fade)
dismissSpeed: "fast",    // Dismiss speed: (slow, fast)
onDraw: null,            // onDraw callback
onDismiss: null          // onDismiss callback
});
});
</script>

---

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