Animated Notification Plugin with jQuery and Animate.css - sticky
File Size: | 32 KB |
---|---|
Views Total: | 2692 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.