Google Snackbar-style Tiny Notification Plugin For jQuery - Notiny

Notiny is a tiny jQuery notification plugin helps you display Material Design snackbar style feedback messages with CSS3 powered show/hide animations on your webpage.

How to use it:

1. Load the jQuery notiny plugin's stylesheet file in the head section of the webpage.

<link href="dist/notiny.css" rel="stylesheet">

2. Load the jQuery notiny plugin's script at the bottom of the webpage but after jQuery library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="dist/notiny.js"></script>

3. Display a basic notification bar on your webpage.

$.notiny({ text: 'Hello, world!' });

4. Full customizable options.

$.notiny({ 

  // Image path (http/base64)
  image: undefined,

  // Position on screen, values: right-bottom, right-top, left-bottom, left-top
  position: 'right-bottom',

  // dark or light
  theme: 'dark',

  // Template, these classes should ALWAYS be there
  template: '<div class="notiny-base"><img class="notiny-img"><div class="notiny-text"></div></div>',

  // css width
  width: '300',

  // Text that will be displayed in notification
  text: '',

  // Display background or not, if false, background: transparent;
  background: true,

  // Hide automatically
  autohide: true,

  // Hide by click
  clickhide: true,

  // Autohide delay
  delay: 3000,

  // Enable animations
  animate: true,

  // Show animation string
  animation_show: 'notiny-animation-show 0.4s forwards',

  // Hide animation string
  animation_hide: 'notiny-animation-hide 0.5s forwards'

});

---

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