Modern Toast Notification With Sounds And Countdown Bars – Toasty.js

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