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();
 

toast.info("Here is some information!");
 

toast.success("You did something good!");
 

toast.warning("Warning! Do not proceed any further!");
 

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.


var toast = new Toasty({
    
    transition: "slideUpDownFade"
});
 

toast.transition("slideUpDownFade");
 

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 = {
    
    
    
    
    classname: "toast", 
    
    transition: "fade",
    
    
    
    insertBefore: true,
    
    
    
    duration: 4000,
    
    
    
    
    enableSounds: false,
    
    
    
    autoClose: true,
    
    
    
    progressBar: false,
    
    
    
    sounds: {
        
        info: "./dist/sounds/info/1.mp3",
        
        success: "./dist/sounds/success/1.mp3",
        
        warning: "./dist/sounds/warning/1.mp3",
        
        error: "./dist/sounds/error/1.mp3",
    },
 
    
    
    onShow: function (type) {},
 
    
    
    onHide: function (type) {},
 
    
    prependTo: document.body.childNodes[0]
};
 

var toast = new Toasty(options);

toast.configure(options);

See live demos and download source code.

DEMO | DOWNLOAD

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.