Demo & Documentation for jQuery plugin toastX

Example 1a: Default Toast

Default form of toast will be shown without using any option. After clicking button, look at the bottom center of screen. Clicking button multiple times will generate same toast again. Default toast stays for 3 seconds. It supports html tags.

$.toastX('<b>Damn!</b> I am toast. I mean literally!!');

Example 1b: Custom Timeout duration

You can use duration setting to change the default timeout of 3 seconds in micro seconds(ms).

$.toastX('I am a custom duration toast set to timeout in 8 seconds.', {

	duration: 8000 // ms is being used, 1000ms = 1 second

});

Example 1c: Basic icons

You can use icon setting to show an icon class defined in css. 4 basic icons are provided with the plugin. You can add more if you want to through css.

$.toastX('This is a toast with an icon', {

icon: 'success', // Adds the class 'toastx-icon-success'

});

Example 2: Different types(css classes) of toast

We have created various color combinations to make lots of toast design type. Clicking the demo buttons will show various toasts with their type values.

$.toastX('I am toast of <i>type</i> <b>green</b>!', {

	type: 'green'

});

You can create your own designs for toast. Let's say, if you want to create type named apple , simply create a css class toastx-apple in the included css file and then directly use it in js. Example :

.toastx-apple {

    background-color: green;

}

Example 3: Custom css classes

You can define and use your own css, through additionalClass property. We have pre-defined some classes that can be used as per your need. Click below buttons for demo.

• Border classes : border-1x, border-2x, border-3x, border-4x
• For curved corners : curved-1x, curved-2x, curved-4x, curved-6x
• For fully round corners : round
• To simulate paused toast, pausedx class can be used and set a very long duration in setting. It blinks toasts slowly with some time gap, so that the toast feels paused.
• Moving background effect can be create with : movebg
• Thick borders and inset shadow gives depth like feel with class : depth

$.toastX('My borders are 4x thick!', {

	additionalClass:'border-4x'

});

You can create your own custom classes for use. Let's say, if you want to create additionalClass named dashed-1x , simply create a css class dashed-1x in the included css file and then directly use it in js. Example :

.dashed-1x {

	border: 1px dashed #fff;

}

You can combine these properties to create even more designs.

Although both additionalClass and type options are assigned to same element, they both can do same thing, the intention here is different. Former is for additional modification but latter is for main toast ui.

Example 4a: Progress bar classes!

The progress bar is automatically enabled by default. You can view and choose from below demo. All predefined values are shown below

$.toastX('This toast would have striped progress bar!', {

	showProgress:true, // true by default, make it false to hide progress bar

	progressBarClass:'toastx-stripes-bar'

});

You can create your own progressBarClass for use in similar way as you would for a type class.

Example 4b: Progress bar color!

The green color of the indicator below the toast can be set as well.

$.toastX("Toast with custom progress bar color!", {

	progressBarColor: "#FF5733" // Set a custom progress bar color

});

Example 5: All possible positions

Clicking button below will show a notification in each of the possible 9 positions of screen, stating the value in the toast. Also note that multiple toasts can be shown at multiple positions.

$.toastX('This toast is displayed at bottom-center position', {

	position: 'top-left' // defaults to bottom-center

});

Example 6: Animations

Clicking each button will show how the animated toast will look at different positions.

$.toastX('This toast should appear and close with flipx effect.', {

	animation:'flipx' // defaults to none

});

All animations are created purely with css classes. Let's understand with an example. When you apply fade animation, on creating the toast, toastx-animate-fade class is added. After 0.4 seconds, its removed so that toast becomes non animated. Similarly, just 0.4 seconds before closing the toast toastx-animate-fade-close is added which contains effects for closing state. With that being said, you can make different for creating and destroying toasts in your own css classes.

Example 7: Callback Functions

The toastX plugin provides the following lifecycle callbacks for better control:

• onBeforeCreate : Use this to execute actions before the toast is created. For instance, validate data or log events
• onCreate : Use this to execute actions immediately after the toast appears
• onBeforeClose : Use this to execute actions before the toast starts closing, like prompting the user
• onClose : Use this to execute actions after the toast is completely removed, such as cleanup tasks

$('#example7-button').click(function () {
	$.toastX('Toast with all callbacks!', {
		onBeforeCreate: function() {
			alert('onBeforeCreate: Getting ready to create toast.');
		},
		onCreate: function() {
			alert('onCreate: Toast is created and will be visible after this.');
		},
		onBeforeClose: function() {
			alert('onBeforeClose: Toast is about to close.');
		},
		onClose: function() {
			alert('onClose: Toast will be removed after this.');
		}
	, type:'warning'});
});

All animations are created purely with css classes. Let's understand with an example. When you apply fade animation, on creating the toast, toastx-animate-fade class is added. After 0.4 seconds, its removed so that toast becomes non animated. Similarly, just 0.4 seconds before closing the toast toastx-animate-fade-close is added which contains effects for closing state. With that being said, you can make different for creating and destroying toasts in your own css classes.

Example 8: Clearing positions

Sometimes, you may need to remove all toasts or a particular screen position. In that scenario, you can do following :

$.toastX.removeAll();  // deletes all toasts from all positions

$.toastX.removeAll('top-right'); // deletes all toasts only from specified position