Non-blocking Toast Notification In jQuery - ToasterJS

Non-blocking Toast Notification In jQuery - ToasterJS
File Size: 8.28 KB
Views Total: 79
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

ToasterJS is a tiny jQuery plugin for creating toast-like notifications that disappear after a period of time set by the user.

More Features:

  • Stackable or not.
  • Auto dismiss or not.
  • Custom positions.

How to use it:

1. Install the ToasterJS plugin as follows:

<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="src/toaster.css" />
<script src="src/toaster.js"></script>

2. To generate a basic toast, i.e upon clicking a button, call a $.toast function.

<button class="toaster">
  Click Me
</button>
$('.toaster').click(function(){
  $.toast({
    content: "I'm a toaster!"
  })
})

3. If you'd like to have the toasts to not fade away, disable the hideAfter property.

$('.toaster').click(function(){
  $.toast({
    content: "I'm a sticky toaster!",
    hideAfter: false
  })
})

4. Changing the position of the toasts is done by setting the position property to one of the available position classes:

  • bottom-left
  • bottom-right
  • top-left
  • top-right
$('.toaster').click(function(){
  $.toast({
    content: "I'm toasting in the corner!",
    position: "bottom-left"
  })
})

5. Enable or disable stacking of toast elements.

$.toast({
  content: "I won't stack!",
  stacking: false
})

6. You can even change the contents of the toast element to have other HTML elements.

$('.toaster').click(function(){
  $.toast({
    content: '<i class="icon-warning"></i> <a href="/">Toaster link!</a>',
    position: "bottom-left"
  })
})

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