Super Tiny jQuery Notification Bar Plugin - toast

toast is a super simple and easy-to-use jQuery plugin that allows you to create a notification bar with smooth fade in / out effects for displaying important messages of your website. 

You might also like:

• Event Based Bootstrap Form Validation Pluin with jQuery - formalerts
• Enable Win8 Metro Interfaces Easily - Metro.js
• jQuery Windows 8-Style Notification Plugin - notific8
• BootMetro - Metro Style Web Framework
• Stackoverflow Like Notification Bar for jQuery - Howdy-do
• Smooth Sliding Notification Bar Plugin - msgTips
• Elegant iOS-like Notification Plugin - ClassyNotty
• JS Notification Plugin For Bootstrap or jQuery UI - Pines Notify
• Simple Notification Bar Plugin - jBar
• Alertify - Customizable jQuery Notification Plugin
• noty - Cool Jquery Notification Plugin
• Cool Animated Notification Plugin with jQuery - jGrowl
• jQuery Event Based Notification Plugin For Bootstrap - BS-Alerts

How to use it:

1. Include jQuery library and jQuery toast plugin on your html page

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

2. The javascript

<script>
$(window).load(function() {
$.toast('<h4>Hello, world!</h4> Demo For jQuery toast!');
});
</script>

3. The CSS

.toast {
position: fixed;
list-style: none;
padding: 0;
top: 0;
z-index: 999999;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
}
.toast li {
margin: 10px 0 0 0;
display: block;
background-color: #fcf8e3;
color: #c09853;
border: 1px solid #fbeed5;
padding: 5px 10px;
border-radius: 4px;
-webkit-border-radius: 4px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 2px 5px rgba(0,0,0,.15);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.15);
}
.toast li:first-child {
margin-top: 0;
}
.toast li.danger {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.toast li.info {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.toast li.success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.toast button.close {
background: none;
border: none;
font-weight: bold;
font-size: 20px;
line-height: 20px;
float: right;
padding: 0;
margin: 0;
color: rgba(0,0,0,.25);
cursor: pointer;
}
.toast h1, .toast h2, .toast h3, .toast h4 {
display: inline;
}

4. Options

<script>
$(window).load(function() {
$.toast('<h4>Hello, world!</h4> Demo For jQuery toast!,',{
sticky: true, // Whether or not the notification is stikcy
type: 'danger', // style for notification bar. blank, danger, info, success
duration: 5000, // Length of time a non-sticky toast will be displayed (ms).
}
);
});
</script>

5. Configuration

$.toast.config.width = 800; // width of the notification bar
$.toast.config.align = 'right'; // alignment of the notification bar. right, left, center
$.toast.config.closeForStickyOnly = true; // close button only display for sticky notification

>

---

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