Ultra Small jQuery Notification Plugin

Notiny is an ultra-small jquery notification plugin that helps you display material design snack bar style messages while show hides CSS3 animations on your web page.

jquery notification popup, jquery notification message example, best jquery notification plugin, jquery toast notification, notification jquery css

Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

How to make use of it:

1. Load the jQuery notiny plugin stylesheet file in the main section of the web page.

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

2. Load the jQuery notiny plugin script at the bottom of the webpage.

<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 web page.

$.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'

});

Google Snackbar-style Tiny Notification, Notiny Plugin/Github