This time I will share jQuery Plugin and tutorial about Animated Sticky Notification Bar In jQuery – notifi.js, hope it will help you in programming stack.
notifi.js is a simple, tiny (~1kb minified) jQuery plugin to create animated, fixed alert notifications that slide into view from the top of the webpage.
How to use it:
1. Load the stylesheet notifi.css
for the basic styling of the notification bar.
1 |
< link rel = "stylesheet" href = "css/notifi.css" > |
2. Load jQuery library and the notifi.js plugin at the end of the document.
1 |
< script src = "/path/to/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/notifi.min.js" ></ script > |
3. Define the message (html or plain text) to be displayed in the notification bar.
4. Display the notification bar on the page.
5. Auto dismiss the notification bar after a timeout just like the Toast notification.
6. Specify the time to wait before showing the notification bar when triggered. Default: 0.
7. Config the animation speed.
8. Customize the dismiss button.
2 |
noticeClose: '<div>X</div>' , |
3 |
noticeCloseClass: 'ntf-notice-close' |
9. Apply your own CSS styles to the notification bar.
2 |
noticeClass: 'custom-class' |
This awesome jQuery plugin is developed by scullytr. For more Advanced Usages, please check the demo page or visit the official website.