Minimal Animated Notification Plugin with jQuery and CSS3 - miniNoty
File Size: | 72 KB |
---|---|
Views Total: | 4863 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A super simple and lightweight jQuery plugin which pops up steam notifications with CSS3 based animations at bottom right corner of your web/app page.
How to use it:
1. Load the jQuery library and jQuery miniNoty plugin in the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.miniNoty.js"></script>
2. Add the following CSS snippet into your CSS file.
.miniNoty { position: fixed; right: 10px; bottom: -10px; padding: 10px 15px; border-radius: 5px; color: #fff; cursor: pointer; max-width: 300px; min-width: 150px; opacity: 0; z-index: 101; -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .miniNoty-show { bottom: 10px; opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .miniNoty-success { background: mediumseagreen; box-shadow: 0 2px 5px mediumseagreen; } .miniNoty-error { background: indianred; box-shadow: 0 2px 5px indianred; } .miniNoty-normal { background: lightgrey; box-shadow: 0 2px 5px lightgrey; color: #000; } .miniNoty-warning { background: goldenrod; box-shadow: 0 2px 5px goldenrod; }
3. Create a link to trigger a notification box. Use CSS class to specify the notification type you wish to use.
<a class="success" title="" href="">Success</a> <a class="normal" title="" href="">Normal</a> <a class="error" title="" href="">Error</a> <a class="warning" title="" href="">Warning</a>
4. Initialize the plugin. That's it.
window.onload = function(){ $('a').click(function () { $.miniNoty('Your message goes here!', $(this).attr('class')) return false; }) }
5. Available setting for the notification boxes.
$.miniNoty({ 'class': 'miniNoty', timeoutToHide: 3000, // timeout to hide timeoutAnimEnd: 500, // timeout animate in SCSS view: 'normal', autoHide: true, message: '', buttons: [ { isClose: 1, name: 'Close', link: '#', target: '', click: function(){ $(this).parent().click() return false; } } ], allowButtonClose: false, redirect: false, // url blank: false // target=_blank })
6. Public methods.
$.miniNotyConfig.get() // get global config $.miniNotyConfig.set({ // set global config timeoutToHide: 6000, // any params timeoutAnimEnd: 1000 })
Change log:
2016-071-14
- JS update.
2015-08-27
- Changed color for default
2015-08-25
- Added methods
2015-07-09
- Added option redirect of click on message.
2015-07-07
- Fix: allowButtonClose is not defined
This awesome jQuery plugin is developed by StepanMas. For more Advanced Usages, please check the demo page or visit the official website.