Create Stylish Animated Notification Bars with jQuery - Sudo Notify

Sudo Notify is a jQuery plugin that displays responsive, animated, nice-looking notification bars to announce important information to your visitors.

Features:

• Quick and easy to implement.
• Custom positions: top or bottom.
• A close button to close a notification bar immediately.
• Callback alerts.
• Auto hide a notification bar after x seconds.
• Custom animations type: fade, scroll-left, scroll-left-fade, scroll-right, scroll-right-fade, slide, slide-fade or none.
• Custom notification types via CSS set in JS objects: error, warning, success and default.

Basic Usage:

1. Include the jquery.sudo-notify.css and jquery.sudo-notify.js files in your document. jQuery library is needed before jquery.sudo-notify.js.

<link rel="stylesheet" href="style/jquery.sudo-notify.css">

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="scripts/jquery.sudo-notify.js"></script>

2. Create a notification container in your document.

<div class="notification-container"></div>

3. Call the plugin to display a notification bar inside the container you just created when page loads.

$(document).ready(function(){
  var sudoNotify = $('.notification-container').sudoNotify();

  sudoNotify.success('Your success message here');
  sudoNotify.warning('Your warning message here');
  sudoNotify.error('Your error message here');
});

4. Or bind the click event to a trigger button that allows to display a notification bar manually.

$(document).ready(function(){
  var sudoNotify = $('.notification-container').sudoNotify();

  ('#trigger-button').click(function(){
    sudoNotify.success('Your success message here');
  });
});

5. Available options to custom the notification bars.

var sudoNotify = $('.notification-container').sudoNotify({

  // auto hide after x seconds set in duration opiton
  autoHide: true,
  
  // displat a close button
  showCloseButton: true,

  // for autoHide option
  duration: 6, //seconds

  // top or bottom
  position: 'top', 

  // log all messages to console with timestamp
  log: true, 

  // notification bar opacity levels
  opacity: 0.95,

  // custom styles for default notification bar
  defaultStyle: {
    maxWidth: '1000px',
    fontSize: '16px'
  },

  // custom styles for error notification bar
  errorStyle: {
    color: '#000000',
    backgroundColor: '#FF9494'
  },

  // custom styles for warning notification bar
  warningStyle: { 
    color: '#000000',
    backgroundColor: '#FFFF96'
  },

  // custom styles for succsee notification bar
  successStyle: { 
    color: '#000000',
    backgroundColor: '#B8FF6D'
  },

  // fade, scroll-left, scroll-left-fade, scroll-right, 
  // scroll-right-fade, slide, slide-fade or none
  animation: {
    type: 'slide-fade',
    showSpeed: 400,
    hideSpeed: 250
  },

  // fire a function when a notificatio bar is closed
  onClose: function(notificationType) {
    alert(notificationType+ ' notification closed');
  },

  // fire a function when a notification bar is trigged.
  onShow: function(notificationType) {
    alert(notificationType+ ' notification showing');
  }
});

6. Public methods

showError('error message')
showSuccess('success message')
showWarning('warning message')
close()

Change log:

2014-11-03

• version 0.2.5

---

This awesome jQuery plugin is developed by sudo-systems. For more Advanced Usages, please check the demo page or visit the official website.