Minimal jQuery Popup Notification Plugin - emergejs
File Size: | 7.33 KB |
---|---|
Views Total: | 1325 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
emergejs is an ultra-light and easy jQuery plugin for creating simple animated notification popups on your website.
Features:
- 4 built-in notification types: alert, info, success and default.
- Can be placed anywhere on your web page.
- Customizable survival time and animation speed.
- Allows to manually hide the notifications by mouse click.
- eventClick callback support.
- Fully customzable via CSS.
How to use it:
1. Add the latest version of jQuery javascript library on your web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2. Add the jQuery emergejs plugin's Javascript and CSS on your web page.
<link rel="stylesheet" href="css/emergejs.css"> <script src="js/emerge.js"></script>
3. Create a link to toggle a notification.
<a href="#" id="show">Show Notification</a>
4. Create the message for the notification.
<div id="notification-content" class="notification"> Your content goes here </div>
5. Initialize the plugin and set the position, theme, notification type options for your notification.
$('#show').click(function() { $( "#notification-content" ).emerge({ theme: 'emerge-base top-right alert', }); });
6. All the default settings.
content: null, theme: null, lifetime: 2400, speedShow: 200, speedHide: 200, hideOnClick: true, eventClick: function() {}
This awesome jQuery plugin is developed by ngroup. For more Advanced Usages, please check the demo page or visit the official website.