Jquery Toast Plugin

Index

Quick Demos

To generate a most simple toast, all you have to do is

Run code $.toast('Here you can put the text of the toast')

There are different kinds of toast types:

Run code $.toast({ heading: 'Information', text: 'Now you can add icons to generate different kinds of toasts', showHideTransition: 'slide', icon: 'info' })

Run code $.toast({ heading: 'Error', text: 'Report any <a href="https://github.com/kamranahmedse/jquery-toast-plugin/issues">issues</a>', showHideTransition: 'fade', icon: 'error' })

Run code $.toast({ heading: 'Warning', text: 'It is going to be supper easy for you to use ;)', showHideTransition: 'plain', icon: 'warning' })

Run code $.toast({ heading: 'Success', text: 'And these were just the basic demos! Scroll down to check further details on how to customize the output.', showHideTransition: 'slide', icon: 'success' })

Options

Of course that is not all what you can do using this plugin, there are a lot of other options. Let's start explaining each, one by one

You should note that, whenever you are going to use options, you have to pass an options object and specify the text as follows:

Run code $.toast({ text: 'This will become the toast message' })

The text can be an array:

Run code $.toast({ heading: 'How to contribute?!', text: [ 'Fork the repository', 'Improve/extend the functionality', 'Create a pull request' ], icon: 'info' })

Or put some HTML in the text

Run code $.toast({ heading: 'Can I add <em>icons</em>?', text: 'Yes! check this <a href="https://github.com/kamranahmedse/jquery-toast-plugin/commits/master">update</a>.', hideAfter: false, icon: 'success' })

1. Specifying the heading of toast message

You can use the heading to set the heading property to set the heading of the toast message

Run Code $.toast({ heading: 'Headings', text: 'You can use the `heading` property to specify the heading of the toast message.', })

2. Making them sticky:

There will be times, when you will want to have sticky toasts. To make them sticky, all you have to do is set the hideAfter to false. Here is a sticky toast

Run Code $.toast({ text: 'Set the `hideAfter` property to false and the toast will become sticky.', hideAfter: false })

* hideAfter property is basically used to set the timer after which the toast will get hidden. But you can set it to false in order to achieve the sticky toasts.

3. Changing the toast hide timer

You can use the property from the above option i.e. hideAfter to change the timer after which toast gets hidden. You have to specify the timer in milliseconds

Run Code $.toast({ text: 'Set the `hideAfter` property to milliseconds and the toast will hide after the specified milli seconds.', hideAfter: 5000 // in milli seconds })

4. Changing the show/hide animation

You can use showHideTransition property to set the animation. Following are the available options:

fade for fade transitions

for fade transitions slide for slide up and down transitions

for slide up and down transitions plain simple show from and hide to corner transition

Run Code $.toast({ text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions', heading: 'Slide transition', showHideTransition: 'slide' })

Run Code $.toast({ text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions', heading: 'Fade transition', showHideTransition: 'fade' })

Run Code $.toast({ text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions', heading: 'Plain transition', showHideTransition: 'plain' })

5. Making the toast closeable or not

You can use allowToastClose to allow the user to close the toast or not. The only thing that this option does is make that little cross button show or hide itself

Run Code $.toast({ heading: 'Closeable Toast', text: 'Set the `allowToastClose` property to true|false to make the toast closeable or not', allowToastClose: true })

Run Code $.toast({ heading: 'Non closeable Toast', text: 'Set the `allowToastClose` property to true|false to make the toast closeable or not', allowToastClose: false })

6. Setting the toast stack

stack property can be used to specify how many maximum toasts you want to show at any point of time. By default this property is set to 5

Run Code $.toast({ heading: 'Stack', text: 'If set to a number, it will show that number of toasts at max at a time', stack: 4 })

Run Code $.toast({ heading: 'No stacking', text: 'If set to false, there will be only one toast at once.', stack: false })

Note Hit the run button multiple times to test these demos.

7. Positioning the toast

position property can be used to specify the position. There are following predefined positions which you can use:

bottom-left value to show the toast at bottom left position

value to show the toast at bottom left position bottom-right value to show the toast at bottom right position

value to show the toast at bottom right position bottom-center value to..

value to.. top-right value to..

value to.. top-left value to..

value to.. top-center value to..

value to.. mid-center value to..

value to.. { top: '-', bottom: '-', left: '-', right: '-' } javascript object with positioning properties as you set in CSS

Run Code $.toast().reset('all'); $.toast({ heading: 'Positioning', text: 'Specify the custom position object or use one of the predefined ones', position: 'bottom-left', stack: false })

Run Code $.toast().reset('all'); $.toast({ heading: 'Positioning', text: 'Specify the custom position object or use one of the predefined ones', position: 'bottom-right', stack: false })

Run Code $.toast().reset('all'); $.toast({ heading: 'Positioning', text: 'Use the predefined ones, or specify a custom object', position: 'bottom-center', stack: false })

Run Code $.toast().reset('all'); $.toast({ heading: 'Positioning', text: 'Use the predefined ones, or specify a custom object', position: 'top-left', stack: false })

Run Code $.toast().reset('all'); $.toast({ heading: 'Positioning', text: 'Use the predefined ones, or specify a custom position object.', position: 'top-right', stack: false })

Run Code $.toast().reset('all'); $.toast({ heading: 'Positioning', text: 'Use the predefined ones, or specify a custom position object.', position: 'top-center', stack: false })

Run Code $.toast().reset('all'); $.toast({ heading: 'Positioning', text: 'Use the predefined ones, or specify a custom position object.', position: 'mid-center', stack: false })

Run Code $.toast().reset('all'); $.toast({ heading: 'Positioning', text: 'Use the predefined ones, or specify a custom position object.', position: { left: 120, top: 120 }, stack: false })

Note It should be noted that, once you change the position of toast by using the `position` property, you'll have to reset the position for the next toasts, if you want them to appear at their default position i.e. the bottom left corner. Or else, each new toast generated will be appearing at the last position i.e. where you displayed the last positioned toast. You can reset the toast position by.

8. Messages with icons

icon property can be used to specify the predefined types of toasts. Following are the predefined types:

info generates a toast with information icon

generates a toast with information icon warning generates a toast with warning icon

generates a toast with warning icon error generates a toast with error icon

generates a toast with error icon success generates a toast with success icon

Run Code $.toast({ heading: 'Warning', text: 'Now you can seemlessly generate warnings using the icon property in the options', icon: 'warning' })

Run Code $.toast({ heading: 'Success', text: 'Here is some kind of success message with a success icon that you can notice at the left side.', icon: 'success' })

Run Code $.toast({ heading: 'Error', text: 'An unexpected error occured while trying to show you the toast! ..Just kidding, it is just a message, toast is right in front of you.', icon: 'error' })

Run Code $.toast({ heading: 'Information', text: 'Now you can add icons to the toasts as well.', icon: 'info' })

9. Background & text color

bgColor property is used to specify the background color of the toast message. Default is '#444'

textColor property is used to specify the text color of the toast message. Default is '#eee'

Run Code $.toast({ heading: 'Colors', text: 'Colors are specified using `bgColor` and `textColor` properties.', bgColor: '#FF1356', textColor: 'white' })

10. Setting the text alignment

textAlign property is used to set the alignment of text inside the toast. Permitted values are:

left

right

center

Run Code $.toast({ text: 'Processing! Please wait..', textAlign: 'center' })

11. Toast Events

Toast exposes the following events for you to bind to whatever you want

beforeShow will be triggered right before the toast is about to appear

will be triggered right before the toast is about to appear afterShown will be triggered after the toast has appeared

will be triggered after the toast has appeared beforeHide will be triggered before the toast is about to hide

will be triggered before the toast is about to hide afterHidden will be triggered right after the toast gets hidden

$.toast().reset('all'); Run Code $.toast({ text: 'Triggers the events', beforeShow: function () { alert('The toast is about to appear'); }, afterShown: function () { alert('Toast has appeared.'); }, beforeHide: function () { alert('Toast is about to hide.'); }, afterHidden: function () { alert('Toast has been hidden.'); } })

12. Updating Toasts

If you have a reference to a toast and want to update that, you can do so by calling the update method on the instance.

Run Code var myToast = $.toast({ heading: 'Information', text: 'Here is some information that will be later on turned to an error', icon: 'info', hideAfter: false }); // Update the toast after three seconds. window.setTimeout(function(){ myToast.update({ heading: 'Error', text: 'Here is an information that changed to error', icon: 'error', hideAfter: false }); }, 3000)

13. Resetting Toasts

If you have the reference to a specific toast, you can reset that by doing the following

var myToast = $.toast('Some toast that needs to be removed.'); myToast.reset(); // remove the toast "Some toast that needs to be removed"

If you do not have the reference to a specific toast and want to reset every toast, do the following:

$.toast().reset('all');