Create Toaster Notifications with a Few Lines of Code | ToasterJS

ToasterJS Library is a JavaScript library designed to display toasted non-blocking notifications that disappear after a period of time specified by the user.

how to show toast message in jquery, toast is not a function jquery, notification jquery plugin, jquery mobile toast popup, jquery toast width, jquery notification

How to make use of 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, that is, when you click the button, call the $.toast function.

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

3. If you want the toast not to fade, disable the hideAfter feature.

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

4. The position of the toast is changed by setting the position property to one of the available center classes:

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

5. Enable or disable toast item stacking.

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

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

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

Non-blocking Toast Notification In jQuery, ToasterJS Plugin/Github


See Demo And Download

Official Website(rosshatokay): Click Here

This superior jQuery/javascript plugin is developed by rosshatokay. For extra Advanced Usages, please go to the official website.

Leave a Comment