biscuit.js
A customizable cookie based jQuery notification plugin with nifty animations and persistence.
Features
- Cookie based persistence
- Desktop notifications option
- Nifty animations from https://github.com/codrops/ModalWindowEffects
Dependencies
- jQuery
- js-cookie
- Currently, FontAwesome if you want the default notification icons
Usage
-
Include the dependencies and also
biscuit.js -
Make a container
<div class="notifications"></div>- Set the notifications
$('.notifications').biscuit({ 'messages' :[ {'text' : 'This is a message', 'level' : 'info'}, {'text' : 'This is an error message', 'level' : 'error'} ] });- Display them on the same or any other page
$('.notifications').biscuit('display');Options
$.fn.biscuit.settings = { 'delay' : 500, 'text' : '', 'level' : 'info', 'effect' : 'biscuit-effect-1', //From biscuit-effect-1 to biscuit-effect-19 are available 'path' : '/', 'icon' : '', 'dark_theme' : false, 'show_icon' : true, 'show_minimize_icon' : true, 'no_duplicates' : true, 'persistent' : true, //Determines if the message should be persistent across pages 'desktop_notifications' : false, 'desktop_notification_timeout' : 5000 };Options can be set globally for all messages when setting them like this:
$(".messages").biscuit({ 'messages' :[ { 'text' : 'This is a normal error message', 'level' : 'error' }, { 'text' : 'This is a normal success message with a <a href="#">link</a>', 'level' : 'success' } ], 'desktop_notifications' : false, 'show_icon' : false, 'effect' : 'biscuit-effect-6', 'icon' : 'info_icon.png' });Or by setting them individually for each message:
$(".messages").biscuit({ 'messages' :[ { 'text' : 'This is a non-persistent message', 'level' : 'info', 'effect': 'biscuit-effect-9', 'persistent': false }, { 'text' : 'This is a normal success message with a <a href="#">link</a>', 'level' : 'success', 'id': 'custom_id', 'show_minimize_icon': false } ] });Methods
The following methods affect all messages therefore must be called on the main container.
$('.messages').biscuit('remove_all'); // Removes all messages from cookie and display $('.messages').biscuit('hide_all'); // Hides all messages $('.messages').biscuit('show_all'); // Shows all messages $('.messages').biscuit('get_messages'); // Returns all of the message elements in the main container $('.messages').biscuit('destroy'); // Destroys the plugin, removing it from data elementsThe following methods affect single messages:
$('#custom_id').biscuit('show'); // Shows the message $('#custom_id').biscuit('hide'); // Hides the message $('#custom_id').biscuit('remove_from_cookie'); // Removes the message from cookie but keeps in displayEvent callbacks
The following event callbacks can be set on every message individually. You can get a handle for every message using the id option or selecting it from the container's children.
$('#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 hid'); });
