Lightweight Message Toaster For jQuery - timed-message.js

File Size: 11.1 KB
Views Total: 546
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight Message Toaster For jQuery - timed-message.js

timed-message.js is a lightweight and easy-to-use jQuery plugin used for displaying toast-style non-blocking notifictions to alert the user of something.

Basic usage:

1. Place jQuery library and the jQuery timed-message.js plugin's files into the html document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="timed-message.css">
<script src="timed-message.js"></script>

2. Create a default toast message.

TimedMessage.createMessage("This is a <b>timed</b><br/> message.");

3. Create a toast message that will disappear after 2 seconds.

TimedMessage.createMessage("This is a <b>timed</b><br/> message demo", 2000);

4. Create a toast message with additional settings.

TimedMessage.createMessage("This is a <b>timed</b><br/> message demo", 2000,{
  
  // Root of JQuery selector.
  scope: null,

  // Time in milliseconds for the message to fade out.  
  // Change if transition duration change.
  fadeOutDuration: 1000,

  // The name of the css class to add to the timed message.  
  // This will also remove default css.
  cssClass: '',

  // Function called once the message has completely faded out.
  onDone: function(){}

});

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