Cookie Based Notification Popup with jQuery and CSS3 - biscuit.js
File Size: | 23.1 KB |
---|---|
Views Total: | 4145 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

biscuit.js is a jQuery plugin that uses jQuery cookie plugin to detect the cookies and display various types of notification messages with cool CSS3 animations on your webpage / web app.
Features:
- 19+ cool CSS3 animations based on Nifty Modal Window Effects.
- Auto dismiss after a specified timeout.
- Custom message text, icons, etc.
- 6 types of notifications: default, debug, info, error, success, warning.
- Supports desktop notification.
- 2 built-in themes: default and dark.
- Useful API to full control over the plugin.
See also:
- Cookie Based Modal Popup Plugin For jQuery - Popup Window
- Create Cookie Based Popup Messages using jQuery - Flash Messages
Basic usage:
1. Include jQuery library and other required JavaScript files in your web page.
<script src="jquery-1.11.3.min.js"></script> <script src="jquery.cookie.min.js"></script> <script src="src/biscuit.js"></script>
2. Include the biscuit.css
for basic notification styles.
<link rel="stylesheet" href="src/biscuit.css">
3. Include the effects.css
for amazing CSS3 powered notification animations.
<link rel="stylesheet" href="src/effects.css">
4. Include the Font Awesome 4 for default notification icons.
<link rel="stylesheet" href="font-awesome.min.css">
5. Create a notification container.
<div class="messages"></div>
6. Setup your notification messages.
$(".messages").biscuit({ 'messages' :[ { // custom message messages 'text' : 'This is a non-persistent message', // default, debug, info, error, success, warning 'level' : 'info', // CSS3 animations. See the effects.css // From biscuit-effect-1 to biscuit-effect-19 'effect': 'biscuit-effect-9', // Determines if the message should be persistent across pages 'persistent': false }, { 'text' : 'This is a dark error message', 'level' : 'error', 'effect': 'biscuit-effect-6', dark_theme: true }, { 'text' : 'This is a normal error message', 'level' : 'error', 'effect': 'biscuit-effect-6' }, { 'text' : 'This is a normal success message with a <a href="#">link</a>', 'level' : 'success', 'id': 'custom_id', 'show_minimize_icon': false } ], 'desktop_notifications': false, 'show_icon': true, // Custom notification icons. 'icon': 'info_icon.png', });
7. Show the notifications using 'display' method.
$(".messages").biscuit("display");
8. Full default settings.
'delay' : 500, 'text_show_delay' : 200, 'text' : '', 'level' : 'info', 'effect' : 'biscuit-effect-1', 'path' : '/', 'icon' : '', 'dark_theme' : false, 'show_icon' : true, 'show_minimize_icon' : true, 'no_duplicates' : true, 'persistent' : true, 'desktop_notifications' : false, 'desktop_notification_timeout' : 5000
8. Public methods.
// Removes all messages from cookie and display $('.messages').biscuit('remove_all'); // Hides all messages $('.messages').biscuit('hide_all'); // Shows all messages $('.messages').biscuit('show_all'); // Returns all of the message elements in the main container $('.messages').biscuit('get_messages'); // Destroy $('.messages').biscuit('destroy'); // Shows the message $('#custom_id').biscuit('show'); // Hides the message $('#custom_id').biscuit('hide'); // Removes the message from cookie but keeps in display $('#custom_id').biscuit('remove_from_cookie');
9. onhide and onremove callbacks
$('#custom_id').on('message_remove', function(data){ console.log('A message was removed'); }); $('#custom_id').on('message_hide', function(data){ console.log('A message is hidden'); });
This awesome jQuery plugin is developed by auxiliary. For more Advanced Usages, please check the demo page or visit the official website.