Super Tiny Notification Plugin With jQuery - Notifino
File Size: | 7.91 KB |
---|---|
Views Total: | 1717 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Notifino is a very small (~3kb unminified) jQuery plugin for creating flexible, customizable notification bars that appear at the top of the webpage.
How to use it:
1. Load jQuery library together with the jQuery Notifino plugin's JS and CSS files in the html page.
<link rel="stylesheet" href="notifino.css"> <script src="jquery.min.js"></script> <script src="jquery.notifino.js"></script>
2. Load the Font Awesome 4 Icon Font for the close icon (OPTIONAL).
<link rel="stylesheet" href="font-awesome.min.css">
3. Display a default notification bar on the webpage.
$(" body ").notifino();
4. Change the default styles and message text of the notification bar.
$(" body ").notifino({ // HEX CODE or RGB background : '#23ADDB', // Message text text : 'Hey there, you got a new notification!', // Text color color : '#fff', // Default wrapper wrapper : '<div class="notifino"></div>', // standard - fluid - boxed layout : 'fluid', // Rounded border or not rounded : false, // Text for close button closeBtnText : '', // Close button options closeButton : { show : true, id : "notifino-close", class : 'notifino-btn-rounded', icon : true }, });
5. Add a second action button to the notification bar.
$(" body ").notifino({ secondButton : { show : true, text : 'Learn more', href : 'http://jqueryscript.net', bgColor : '', textColor : '#fff' } });
This awesome jQuery plugin is developed by erstefan. For more Advanced Usages, please check the demo page or visit the official website.