Mobile Friendly Material Toast Plugin With jQuery - Toast.js

Toast.js is a jQuery plugin which allows to create Android / Material Design inspired, toast-like notification popups on the screen. The toast messages automatically disappear after a timeout or after user interaction such as swipe and mouse drag. The plugin also has the ability to re-position the toast notifications depending on the current screen size.

How to use it:

1. Include jQuery library together with the jQuery Toast.js plugin's files on the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="toast.js"></script>
<link href="toast.css" rel="stylesheet">

2. Include the Hammer.js for multi-touch gestures support.

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

3. Create a basic toast notification that auto dismiss after 5 seconds.

toast('Toast Message');

4. Create a basic toast notification that auto dismiss after 3 seconds.

toast('Toast Message', 3000);

5. Create a basic toast notification with a custom CSS class.

toast('Toast Message', 3000, 'custom-class');

6. Create a basic toast notification with a callback function.

toast('Toast Message', 3000, 'custom-class', function(){});

7. You can also pass the parameters as an object to the toast() method.

toast({
  message: '',
  displayLength: 5000,
  className: '',
  completeCallback: $.noop
});

---

This awesome jQuery plugin is developed by rabelloo. For more Advanced Usages, please check the demo page or visit the official website.