Minimal Fading Toast Message Plugin For jQuery - iToast

File Size: 3.04 KB
Views Total: 588
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Fading Toast Message Plugin For jQuery - iToast

iToast is a dead simple jQuery notification plugin which helps you display minimal, clean, Android-style, auto-dismiss toast messages at the bottom of the screen.

How to use it:

1. Load the stylesheet itoast.css that provides the basic styling of the toast messages.

<link href="itoast.css" rel="stylesheet">

2. Load both jQuery library and the jQuery itoast.js script when needed.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="itoast.js"></script>

3. The JavaScript to show a basic toast message on the screen. Possible parameters:

  • msg: Toast message here.
  • tm: Timeout in milliseconds.
  • theme: Theme name. Built in themes: theme_red and theme_green.
// itoast.show(msg,tm,theme)
itoast.show("Toast message!",5000,'theme_green'); 

4. Override the default styles:

.theme_red {
  border: 2px solid #da6262;
  background-color: #cd6c6c;
  color: #FFF;
}

.theme_green {
  border: 2px solid #D6E9C6;
  background-color: #DFF0D8;
  color: #468847;
}

5. You can create your own themes in the CSS as follow:

.theme_NAME {
  ...
}

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