Android Style jQuery Toast Notification Plugin

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.