Android Style jQuery Toast Notification Plugin
File Size: | 3.03 KB |
---|---|
Views Total: | 1991 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Android Toast is a dead simple jQuery plugin to create Android-like toast pop-ups that display a certain amount of time and automatically fade out after a timeout.
How to use it:
1. Load the necessary jQuery library and jQuery UI in your document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
2. Load the AndroidToast.js script after jQuery library.
<script src="AndroidToast.js"></script>
3. Add your custom message into the toast notification.
var toast = $(window).AndroidToast({ message : "I'm a toast message" });
4. Display the toast notification with AndroidToast('show')
method.
toast.AndroidToast('show');
5. Style the toast notification whatever you like.
#hr-toast { -webkit-box-shadow: 0 0 12px rgba(255, 255, 255, 0.51); -moz-box-shadow: 0 0 12px rgba(255, 255, 255, 0.51); box-shadow: 0 0 12px rgba(255, 255, 255, 0.51); background: none repeat scroll 0 0 rgba(67, 74, 83, 0.9); border-radius: 25px; bottom: 150px; color: #FFFFFF; display: inline-block; font-family: "roboto", sans-serif; font-size: 18px; left: 0; line-height: 22px; margin: auto; max-width: 300px; min-width: 100px; padding: 20px; position: fixed; right: 0; text-align: center; width: 90%; z-index: 2000; }
6. Customization options available.
var toast = $(window).AndroidToast({ // message to show message:"Hi, I am android like toast", // fade in time for toast fadeInTime : "700", //fade out time for toast fadeOutTime : "400", // easing to show toast easing: "swing", // delay time to stay on the screen stayTime: "1000", // max-width toast can maxWidth: "300", // value from bottom of the window bottomPosition: "150", // custom class to add, you can give your own css using custom class customClass : "", // method to trigger before the toast shows beforeShow: function() {}, // method to trigger after the toast show afterShow : function() {}, // method to trigger after the toast hide afterHide : function(){} });
This awesome jQuery plugin is developed by hemkaran. For more Advanced Usages, please check the demo page or visit the official website.