sticky notification bar notifi - Free Download Animated Sticky Notification Bar In jQuery - notifi.js

Free Download Animated Sticky Notification Bar In jQuery – notifi.js

Posted on

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.

sticky notification bar notifi - Free Download Animated Sticky Notification Bar In jQuery - notifi.js
File Size: 6 KB
Views Total: 1088
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 var content = 'This is a <b><a href="https://www.jqueryscript.net/tags.php?/Notification/">Notification</a></b> bar';

4. Display the notification bar on the page.

1 $.notifi(content);

5. Auto dismiss the notification bar after a timeout just like the Toast notification.

1 $.notifi(content,{
2   autoHideDelay: 3000
3 });

6. Specify the time to wait before showing the notification bar when triggered. Default: 0.

1 $.notifi(content,{
2   autoShowDelay: 500
3 });

7. Config the animation speed.

1 $.notifi(content,{
2   showSpeed: 100,
3   hideSpeed: 100
4 });

8. Customize the dismiss button.

1 $.notifi(content,{
2   noticeClose:    '<div>X</div>',
3   noticeCloseClass: 'ntf-notice-close'
4 });

9. Apply your own CSS styles to the notification bar.

1 $.notifi(content,{
2   noticeClass: 'custom-class'
3 });
1 .custom-class {
2   /* CSS styles here */
3 }

This awesome jQuery plugin is developed by scullytr. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net