Flat Style jQuery Bottom Right Notification Plugin - Notifications.js
File Size: | 7.97KB |
---|---|
Views Total: | 6374 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Notifications.js is a notification library built with jQuery for creating flat styled notification bars sliding out from the right bottom of your page. The plugin currently comes with 4 built-in types of notifications: info, error, warning, success.
How to use it:
1. Create a button to trigger a notification bar.
<button id="showInfo">Show Info Notification</button> <button id="showError">Show Error Notification</button> <button id="showWarning">Show Warning Notification</button> <button id="showSuccess">Show Success Notification</button>
2. Include the jQuery javascript library and notification.js script on the web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="notifications.min.js"></script>
3. Call the plugin.
<script> $('#showError').on('click', function(e) { displayNotification('error', 'This is an error notification', 2000); e.preventDefault(); }); $('#showInfo').on('click', function(e) { displayNotification('info', 'This is an info notification', 2000); e.preventDefault(); }); $('#showSuccess').on('click', function(e) { displayNotification('success', 'This is an success notification', 2000); e.preventDefault(); }); $('#showWarning').on('click', function(e) { displayNotification('warning', 'This is an warning notification', 2000); e.preventDefault(); }); </script>
4. Add the following styles in your CSS and change it to create your own notification styles.
.notification { width: 300px; height: 80px; position: absolute; bottom: 0; right: -300px; background: #ecf0f1; margin-bottom: 10px; font-family: 'Open Sans', sans-serif; font-size: 16px; padding: 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 80px; border-left: 5px solid } .notification-info { border-left-color: #3498db; color: #3498db } .notification-success { border-left-color: #2ecc71; color: #2ecc71 } .notification-warning { border-left-color: #e67e22; color: #e67e22 } .notification-error { border-left-color: #e74c3c; color: #e74c3c }
This awesome jQuery plugin is developed by VizuaaLOG. For more Advanced Usages, please check the demo page or visit the official website.