Notyfy Notifications plugin
Top notifications
Alert
Success
Danger
Warning
Information
Confirm
Left
Top
Center
Bottom
Center
Center notification
Right
Top
Center
Bottom
Creating a notyfy
var notyfy = notyfy( { text: 'notyfy - Yet another jQuery notification plugin', type: 'primary' // alert|error|success|information|warning|primary|confirm });
Default Options
$.notyfy.defaults = { layout: 'top', theme: 'default', type: 'alert', text: '', dismissQueue: true, // If you want to use queue feature set this true template: '<div class="notyfy_message"><span class="notyfy_text"></span>' + '<div class="notyfy_close"></div></div>', showEffect: function(bar) { bar.animate({ height: 'toggle' }, 500, 'swing'); }, hideEffect: function(bar) { bar.animate({ height: 'toggle' }, 500, 'swing'); }, timeout: false, // delay for closing event. Set false for sticky notifications force: false, // adds notification to the beginning of queue when set to true modal: false, closeWith: ['click'], // ['click', 'button', 'hover'] events: { show: null, hide: null, shown: null, hidden: null }, buttons: false // an array of buttons };
Gritter Notifications plugin
Color options
Light
Dark
Primary
Other examples
Add sticky notificationHas to be manually removed
Add notification without image
Add white notificationHas a "gritter-light" class applied
Add notification with max. of 3Only if there are <= 3 messages already on screen
Creating a Regular Gritter
$.gritter.add({ // (string | mandatory) the heading of the notification title: 'This is a regular notice!', // (string | mandatory) the text inside the notification text: 'This will fade out after a certain amount of time.', // (string | optional) the image to display on the left image: 'http://yourimage.url/image.png', // (bool | optional) if you want it to fade out on its own or just sit there sticky: false, // (int | optional) the time you want it to be alive for before fading out time: '' });
Creating a Primary Gritter
$.gritter.add({ title: 'This is a primary notice!', text: ' Lorem ipsum ...', image: 'your image URL goes here' class_name: 'gritter-primary' });