Material Design Inspired jQuery Snackbar and Toast Plugin - snackbarjs

snackbarjs is a lightweight jQuery plugin to create Google Material Design style snackbars and toasts that automatically disappear after a timeout.

More about Snackbars and Toasts:

Snackbars provide lightweight feedback about an operation in a small popup at the base of the screen on mobile and at the lower left on desktop. They are above all over elements on screen, including the floating action button. Read more...

Basic Usage:

1. Include the required CSS files in the head section of the document.

<link href="src/snackbar.css" rel="stylesheet">
<link href="themes-css/material.css" rel="stylesheet">

2. Include jQuery library and the jQuery snackbar.js plugin at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/snackbar.js"></script>

3. Show a snackbar & toast with custom messages on page loaded.

$(function() {
  $.snackbar({content: "Your message goes here."});
});

4. Show or hide a snackbar using an inline element with data-toggle attribute. All the options can be passed through data-* attributes, as in data-content="Your message goes here.

<span data-toggle="snackbar"
      data-content="Your message goes here."
      data-timeout=0
>Show or hide a snackbar</span>

5. Show or hide a snackbar using JS onclick event.

<span onclick="javascript:$.snackbar({content: 'Your message goes here'});">Create and show a snackbar.</span>

6. Options and defaults.

content: "Some text", // text of the snackbar
style: "toast", // add a custom class to your snackbar
timeout: 100 // time in milliseconds after the snackbar autohides, 0 is disabled

---

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