Super Tiny jQuery Notification Bar Plugin - toast
File Size: | 4.08KB |
---|---|
Views Total: | 3138 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.