Easy Toast Notification Plugin With jQuery And Bootstrap - hinter.js
File Size: | 11.3 KB |
---|---|
Views Total: | 1099 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
hinter.js is a very small jQuery notification plugin which displays error and/or success toast messages on the top of webpage using Bootstrap styles.
How to use it:
1. First you need to load jQuery library and Bootstrap framework in the html page.
<link href="/path/to/bootstrap.min.css" rel="stylesheet"> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootstrap.min.js"></script>
2. Load the jQuery hinter.js script after jQuery.
<script src="dist/hinter.min.js"></script>
3. Display a success message on the screen.
$('body').hinter({ message: "This is a success message." });
4. Display an error message on the screen.
$('body').hinter({ message: "This is an error message.", isSuccess: false });
5. Customize the slideUp animation speed.
$('body').hinter({ message: "This is an error message.", isSuccess: false, slideUp: 250, });
6. Override the default delay time the toast message should stay in the screen.
$('body').hinter({ message: "This is an error message.", isSuccess: false, slideUp: 250, delay: 5000, });
7. Add custom CSS classes and IDs to the toast container.
$('body').hinter({ message: "This is an error message.", isSuccess: false, slideUp: 250, delay: 5000, id: "hinter", class: "hinter" });
Change log:
2016-05-18
- window.jquery instead
This awesome jQuery plugin is developed by skiptirengu. For more Advanced Usages, please check the demo page or visit the official website.