Minimal Clean Toaster Plugin For jQuery - Info.js

Info.js is a really small jQuery plugin to create toast-style, non-blocking, absolutely positioned notification messages on the screen.

How to use it:

1. Include the jQuery info.js script after loading the latest version of jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="info.js"></script>

2. Initialize the info plugin and adjust the placement of the toast messages.

var info = $.info({

    // optional
    top    : 10,
    right : 100
    
});

3. Initialize the info plugin and adjust the placement of the toast messages.

var info = $.info({

    // optional
    top    : 10,
    right : 100
    
});

4. Display your own toast messages on the screen.

info.push({
  content : "Your Message Here"
});

5. Customize the toast messages.

info.push({

  // background color
  color   : "#0D789F",

  // text color
  textColor : "white",

  // message here
  content   : "Some informations.",

  // max width
  width   : 200,

  // height
  height    : "auto",

  // fadeOut animation
  fadeOut   : 500,

  // auto dismiss
  autoHide  : true,

  // timeout in milliseconds
  delay   : 3000
  
});

6. The required CSS styles.

.plugin-info-container { position: absolute; }

.plugin-info-info {
  border-radius: 5px;
  font-size: 10pt;
  padding: 10px;
  cursor: pointer;
  opacity: 0;
  margin-bottom: 10px;
}

.plugin-info-container div:last-child { margin-bottom: 0px; }

---

This awesome jQuery plugin is developed by Ahmore. For more Advanced Usages, please check the demo page or visit the official website.