Use jQuery Message Toaster to toast Android like toast messages

Toast message is a very common thing among the smartphone users. A toast message is simply a message that pops-up on screen for some time and then fades away. So if you want to enable the same functionality on your web application, I’ve created a plugin for you.

jQuery message toaster is a minimal, non-blocking and light-weight jQuery plugin that can be used to generate customizable notification pop-ups which can be displayed on your selected location for some time.

Requirements

• jQuery.

How to use jQuery Message Toaster

• Download the message toaster files either from GitHub or from npm and extract them.
• Import both jQuery and toaster.js in your application.
• Now all you need to do is

  var toaster = new Toaster({
      text: "Hello World"
  });
  

  This code is enough to pop a simple toast message with default configurations with the message “Hello World”. Using default configurations will lead in displaying a toast message with black background with white color text at bottom-right position.

• To display the popup just use – toaster.publish();
• In the plugin, I’ve given many options to customize the design and location of your popup. Something like this

  var toaster = new Toaster({
  
      // text color
      color: "#FFF",
  
      // background color
      background: "#333",
      
      // width
      width: "290px",
  
      // height
      height: "40px",
  
      // Padding of box
      padding: "5px",
  
      // Border radius
      cornerRadius: "5px"
  
      // Vertical position of the box
      verticalPosition: "bottom",
  
      // Horizontal position of the box
      horizontalPosition: "right"
  });
  

  Color, background-color, padding of the box, corner radius of the box, width and height of the box.

• This is all you need to display the toaster on the screen. If you need more information and other configuration options, just checkout the GitHub page.

If you face any issue while using the plugin, or you have any suggestions you can raise them in the comment section below or raise it on GitHub.