Animated Notification Plugin with jQuery and Animate.css - sticky

Yet another jQuery notification plugin used to display sticky, eye-catching message boxes on your website, with cool CSS3 animations based on Animate.css. Licensed under the Apache License, Version 2.0, feel free to use it.

How to use it:

1. Add the required jquery.sticky.min.css and animate.css in the head section of your web page.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
<link rel="stylesheet" href="dist/jquery.sticky.min.css">

2. Add the jQuery notification plugin's script after jQuery library, before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="dist/jquery.sticky.min.js"></script>

3. Display a basic notification box with default options.

// BODY: Message body text/html
// OPTIONS: All options
$.sticky.(BODY, OPTIONS)

4. Available options.

// Icon of notification.
icon     : '',

// Title of notification.
title    : '',

// Body of notification.
body     : '',

// Width of notification holder.
width    : 300,

// Animation speed.
speed    : 500,

// Position of notification, including: top-left, top-mid, top-right, mid-left, mid-mid, mid-right, bottom-left, bottom-mid, bottom-right.
position : 'top-right',

// Hide tips after the number of milliseconds.
hideAfter: 3000,

// A value indicates whether display close button or not.
closeable: true,

// A value indicates whether use Animate.css animations.
useAnimateCss  : false,

// Animations come from https://github.com/daneden/animate.css
// Should be formatted as {'POSITION': ['ENTER_ANIMATION', 'EXIT_ANIMATION']}
// Notes: don't change these if no necessary.
animations     : {
  'top-left'    : ['zoomInRight', 'zoomOutRight'],
  'top-mid'     : ['zoomInUp', 'zoomOutUp'],
  'top-right'   : ['zoomInLeft', 'zoomOutLeft'],
  'mid-left'    : ['zoomInRight', 'zoomOutRight'],
  'mid-mid'     : ['zoomIn', 'zoomOut'],
  'mid-right'   : ['zoomInLeft', 'zoomOutLeft'],
  'bottom-left' : ['zoomInRight', 'zoomOutRight'],
  'bottom-mid'  : ['zoomInDown', 'zoomOutDown'],
  'bottom-right': ['zoomInLeft', 'zoomOutLeft']
},

// Class names of sticky.
iconClassName  : 'sticky-icon',
bodyClassName  : 'sticky-body',
titleClassName : 'sticky-title',
stickyClassName: 'sticky',
holderClassName: 'sticky-holder'

4. Public method to dismiss notifications.

// id is an optional argument
$.sticky.dequeue([id]);

---

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