Toast-style Notification Box jQuery Plugin - Toastee

File Size: 5.92 KB
Views Total: 575
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Toast-style Notification Box jQuery Plugin - Toastee

Toastee is a lightweight yet customizable notification jQuery plugin for creating toast-like notification boxes that automatically fade out after a specific timeout.

How to use it:

1. To begin with, load the jquery.toastee.js script after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.toastee.0.1.js"></script>

2. Call the function on the container in which the toast messages will appear.

<div id="testy"></div>
$('#testy').toastee({
  header: 'Toast Title',
  message: 'Toast Message'
});

3. Specify the notification type.

  • info (default)
  • error
  • success
$('#testy').toastee({
  header: 'Toast Title',
  message: 'Toast Message',
  type: 'error',
});

4. Customize the background & text colors of the toast messages.

$('#testy').toastee({
  header: 'Toast Title',
  message: 'Toast Message',
  color: '#fff',
  background: '#3498db',
});

5. Set the width of the toast messages. Default: 200(px).

$('#testy').toastee({
  header: 'Toast Title',
  message: 'Toast Message',
  width: 300,
});

6. Override the default timeout.

$('#testy').toastee({
  header: 'Toast Title',
  message: 'Toast Message',
  fadeout: 5000, // auto dismiss after 5 seconds
});

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