This time I will share jQuery Plugin and tutorial about Versatile Notification Plugin With jQuery And CSS3 – notify.js, hope it will help you in programming stack.
notify.js is an easy yet highly configurable jQuery notification plugin which helps you show various types of notifications with CSS3 based animations on your webpage.
Features:
- 3 types of notifications: simple, image and dimissable
- 10 built-in themes: default, success, warning, danger, info, black, success-invert, danger-invert, warning-invert, info-invert
- Fancy CSS3 animations based on Animate.css.
- Can be placed anywhere on the webpage: top-left, top-right, bottom-left, bottom-right.
- Custom duration of notification messages.
How to use it:
1. Place the jQuery notify.js plugin’s stylesheet and JavaScript into your html page which has jQuery library installed.
1 |
<link rel="stylesheet" href="css/notify.css"> |
2 |
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> |
3 |
<script src="js/notify.js"></script> |
2. The plugin requires Animate.css for smooth CSS animations.
1 |
<link rel="stylesheet" href="animate.css"> |
3. Create custom notification message with an image.
1 |
<div id="example" class="notify-with-img notify-default"> |
3 |
<div class="notify-text"> |
5 |
<p>Message to notify</p> |
4. Show the notificaiton on page load.
5. To create a dismissable notification, just add the CSS class ‘dismiss-notification’ to the close button like this:
1 |
<div id="test" class="notify notify-default"> |
2 |
<i class="dismiss-notification"></i> |
3 |
This is a danger notification |
6. Change the theme of your notifications.
- notify-default
- notify-success
- notify-warning
- notify-danger
- notify-info
- notify-success-invert”
- notify-warning-invert
- notify-danger-invert
- notify-info-invert
- notify-black
1 |
<div class="notify notify-default">Message here</div> |
7. Plugin’s default customization options.
10 |
animationType: "slideInDown", |
This awesome jQuery plugin is developed by gauravnk. For more Advanced Usages, please check the demo page or visit the official website.
