Google Snackbar-style Tiny Notification Plugin For jQuery - Notiny
File Size: | 13.3 KB |
---|---|
Views Total: | 2698 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Notiny is a tiny jQuery notification plugin helps you display Material Design snackbar style feedback messages with CSS3 powered show/hide animations on your webpage.
How to use it:
1. Load the jQuery notiny plugin's stylesheet file in the head section of the webpage.
<link href="dist/notiny.css" rel="stylesheet">
2. Load the jQuery notiny plugin's script at the bottom of the webpage but after jQuery library.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="dist/notiny.js"></script>
3. Display a basic notification bar on your webpage.
$.notiny({ text: 'Hello, world!' });
4. Full customizable options.
$.notiny({ // Image path (http/base64) image: undefined, // Position on screen, values: right-bottom, right-top, left-bottom, left-top position: 'right-bottom', // dark or light theme: 'dark', // Template, these classes should ALWAYS be there template: '<div class="notiny-base"><img class="notiny-img"><div class="notiny-text"></div></div>', // css width width: '300', // Text that will be displayed in notification text: '', // Display background or not, if false, background: transparent; background: true, // Hide automatically autohide: true, // Hide by click clickhide: true, // Autohide delay delay: 3000, // Enable animations animate: true, // Show animation string animation_show: 'notiny-animation-show 0.4s forwards', // Hide animation string animation_hide: 'notiny-animation-hide 0.5s forwards' });
This awesome jQuery plugin is developed by 4ndv. For more Advanced Usages, please check the demo page or visit the official website.