Customizable Modern Toast Notification With Sounds – Toasty.js

In this post I am going to share awesome jQuery Plugin to create highly customizable modern toast notification with Sounds written in jQuery and CSS3 (Toasty.js). Toasty.js is a minimal JavaScript notification plugin that provides a simple way to display customizable toast messages on the web page with CSS3 transition effects. You can use this plugin in your web based application to display notification message to user after any action like data saved, edit, delete or any error message occur during processing with awesome animation.

Integrate Toast Notification In your Web Based Projects

Libraries

Include Plugins JS+CSS on page

<link href="dist/toasty.min.css" rel="stylesheet">
<script src="dist/toasty.min.js">script>

JS

Now Simply call the plugin instance and then create a message using any of the following methods:
There are 4 types notifications messages you can create purpose for information, successful, warning and error.

var toast = new Toasty();
 
// this show an informational message:
toast.info("Here is some information!");
 
// show a successful message:
toast.success("You did something good!");
 
// show a warning message:
toast.warning("Warning! Do not proceed any further!");
 
// and this a error message:
toast.error("Something terrible happened!");

Here is the list of animation you can use to display notification alert messages.

  • fade (default transition)
  • slideLeftFade
  • slideLeftRightFade
  • slideRightFade
  • slideRightLeftFade
  • slideUpFade
  • slideUpDownFade
  • slideDownFade
  • slideDownUpFade
  • pinItUp
  • pinItDow

Apply new animation.

// the main Toasty function:
var toast = new Toasty({
    // STRING: name of the CSS transition that will be used to show and hide the toast:
    transition: "slideUpDownFade"
});
 
// register the new transition using public method:
toast.transition("slideUpDownFade");
 
// and run the first message with this new transition:
toast.info("You have been registred a new scale transition correctly.");

Following are the list of option you can pass in this plugin to customize the alert notification as per your project need.

var options = {
    // 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",
    },
 
    // 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) {},
 
    // The placement where prepend the toast container:
    prependTo: document.body.childNodes[0]
};
 
// using the main Toasty function:
var toast = new Toasty(options);
// or this public method:
toast.configure(options);

See live demos and download source code.

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Leave a Reply

Your email address will not be published. Required fields are marked *

Top