Author: | egalink |
---|---|
Views Total: | 3,718 views |
Official Page: | Go to website |
Last Update: | October 29, 2018 |
License: | MIT |
Preview:

Description:
Toasty.js is a standalone JavaScript notification library to create pretty, auto-dismissable, CSS3 animated toast messages with sounds and countdown bars.
How to use it:
Import the JavaScript and CSS files into the html page.
<link href="toasty.min.css" rel="stylesheet"> <script src="toasty.min.js"></script>
Initialize the Toasty.js library.
var myToast = new Toasty();
Create toast notifications with varying types: info, success, warning and error.
// info toast.info("message here"); // success toast.success("message here"); // warning toast.warning("message here"); // error toast.error("message here");
Set the animation you prefer. Available animations:
- fade (default)
- slideLeftFade
- slideLeftRightFade
- slideRightFade
- slideRightLeftFade
- slideUpFade
- slideUpDownFade
- slideDownFade
- slideDownUpFade
- pinItUp
- pinItDow
var myToast = new Toasty({ transition: "fade", });
More configuration options with default values.
var myToast = new Toasty({ // STRING: main class name used to styling each toast message with CSS: // .... IMPORTANT NOTE: // .... if you change this, the configuration consider that you´re // .... re-stylized the plugin and default toast styles, including css3 transitions are lost. classname: "toast", // STRING: name of the CSS transition that will be used to show and hide the toast: transition: "fade", // BOOLEAN: specifies the way in which the toasts will be inserted in the html code: // .... Set to BOOLEAN TRUE and the toast messages will be inserted before those already generated toasts. // .... Set to BOOLEAN FALSE otherwise. insertBefore: true, // INTEGER: duration that the toast will be displayed in milliseconds: // .... Default value is set to 4000 (4 seconds). // .... If it set to 0, the duration for each toast is calculated by message length. duration: 4000, // BOOLEAN: enable or disable toast sounds: // .... Set to BOOLEAN TRUE - to enable toast sounds. // .... Set to BOOLEAN FALSE - otherwise. // NOTE: this is not supported by mobile devices. enableSounds: false, // BOOLEAN: enable or disable auto hiding on toast messages: // .... Set to BOOLEAN TRUE - to enable auto hiding. // .... Set to BOOLEAN FALSE - disable auto hiding. Instead the user must click on toast message to close it. autoClose: true, // BOOLEAN: enable or disable the progressbar: // .... Set to BOOLEAN TRUE - enable the progressbar only if the autoClose option value is set to BOOLEAN TRUE. // .... Set to BOOLEAN FALSE - disable the progressbar. progressBar: false, // Yep, support custom sounds for each toast message when are shown // if the enableSounds option value is set to BOOLEAN TRUE: // NOTE: The paths must point from the project's root folder. sounds: { // path to sound for informational message: info: "./dist/sounds/info/1.mp3", // path to sound for successfull message: success: "./dist/sounds/success/1.mp3", // path to sound for warn message: warning: "./dist/sounds/warning/1.mp3", // path to sound for error message: error: "./dist/sounds/error/1.mp3", }, // The placement where prepend the toast container: prependTo: document.body.childNodes[0] });
Callback functions.
var myToast = new Toasty({ // callback: // onShow function will be fired when a toast message appears. onShow: function (type) {}, // callback: // onHide function will be fired when a toast message disappears. onHide: function (type) {}, });
Changelog:
1.5.5 (10/29/2018)
- Bugfix