jQuery Plugin For Animated & Stackable Toasts - Toast

Toast is a jQuery notification plugin used to display animated, highly customizable & styleable, stackable visual feedback messages on your web page.

Features:

• Lightweight and simple-to-use.
• Auto disappear after a timeout.
• Corner close icon to close a toast message manually.
• 3 transition effects: slide, fade or plain.
• Custom stack length.
• Can be placed anywhere on the web page.
• Fully styleable via CSS.
• Callback events supported.

Basic Usage:

1. Load the jQuery Toast plugin's stylesheet in your document's head section.

<link href="jquery.toast.min.css" rel="stylesheet" type="text/css">

2. Load the jQuery JavaScript library and the jQuery Toast plugin's script at the end of the document.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.toast.js"></script>

3. Optionally, you can create an element to toggle a toast message.

<a class="basic-demo">Basic Demo</a>

4. Bind the click function on the A tag and toggle a toast message with custom text.

$('.basic-demo').on('click', function ( e ) {
e.preventDefault();
$.toast({
  text : "Your toast message goes here"
})
});

5. Available options & callbacks to customize your toast messages.

// custom message text
text: '',

// custom toast title
heading: '',

// show/hide transition effects.
// fade, slide or plain.
showHideTransition: 'fade',

// show a close icon
allowToastClose: true,

// auto hide after a timeout
hideAfter: 5000,

// loader
loader: true,
loaderBg: '#9EC600',

// stack length
stack: 5,

// bottom-left, bottom-right, bottom-center, 
// top-left,top-right
// top-center, mid-center
// or an object representing the left, right, top, bottom values
position: 'bottom-left',

// background color
bgColor: '#444',

// custom text color
textColor: '#eee',

// custom text align
textAlign: 'left',

// custom icon
icon: false,

// callback functions.
beforeShow: function () {},
afterShown: function () {},
beforeHide: function () {},
afterHidden: function () {},
onClick: function () {}

Change logs:

2017-11-20

• Add attributes to expose notifications to screenreader users.

2017-10-04

• Add class option to specify custom classes

2016-05-05

• JS update.

2016-03-06

• Updated the js and css for the dist as per the newer functionality

2015-03-23

• Updated the js and css for the dist as per the newer functionality

2014-11-21

• added the ability to update the toast $.toast().update();.

---

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