Animated Sticky Bottom Notification Bar Plugin - jQuery Hat Tip
File Size: | 9.65 KB |
---|---|
Views Total: | 169 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Hat Tip is a simple jQuery plugin for creating an animated notification bar that always stays at the bottom of the web page.
The plugin currently supports four notification types: info, danger, success, and default, making it simple to display important messages, alerts, or limited-time offers to your audience.
See Also:
How to use it:
1. Download and import the jQuery Hat Tip plugin.
<!-- jQuery Is Required --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- jQuery Hat Tip --> <link rel="stylesheet" href="/path/to/hat-tip.min.css" /> <script src="/path/to/hat-tip.min.js"></script> <!-- OR --> <script src="/path/to/hat-tip-bundle.js"></script>
2. Add the following HTML snippet to the bottom of your webpage.
<!--<div id="hattip" role="alert"> <span id="msg"></span> <button type="button" aria-label="Close"><span aria-hidden="true">×</span></button> </div>-->
3. Display a default message in the bottom notification bar.
hattip_fire('This is a default message');
4. The plugin also support HTML content.
hattip_fire('This is an <b>HTML</b> message');
5. The second parameter of the hattip_fire
method is used to specify the notification type.
hattip_fire('This is a <b>DANGER</b> message', 'ht-danger'); hattip_fire('This is a <b>SUCCESS</b> message', 'ht-success'); hattip_fire('This is an <b>INFO</b> message', 'ht-info'); hattip_fire('This is a <b>CUSTOM</b> message', 'custom-class');
6. Add a bounce-in animation to the notification bar.
hattip_fire('With <b>louder animation</b> animation', 'ht-danger', 'dont-panic');
This awesome jQuery plugin is developed by jdmdigital. For more Advanced Usages, please check the demo page or visit the official website.