Demonstration

• Default
  
  click me

  Hello, I am a simple notification.

  Show usage

  $('#notification').miniNotification();

• Close button
  
  click me

  Hello, I am a notification with a close button.

  Show usage

  $('#notification').miniNotification({
    closeButton: true, 
    closeButtonText: '[hide]'
  });

Basic Usage

Basic HTML

<div id="notification">
  <p>The notification has been successfully displayed</p>
</div>

Basic CSS

#notification {
    display: none;
    position: fixed;
    cursor: pointer;
    width: 100%;
    background: #EFEFEF;
    text-align: center;
    border-top: 2px solid #FFF;
    z-index:9999;
}

Basic Initialization

$(function() {
  $('#notification').miniNotification();
});

Options

• position (string)
  Notification position. Possible values: 'top' or 'bottom'.
  Default value is 'top' Show example

  $('#notification').miniNotification({
    position: 'bottom'
  });

• show (boolean)
  Show on load.
  Default value is true Show example

  $('#notification').miniNotification({
    show: false
  });

• effect (string)
  Animation effect. Possible values: 'slide' or 'fade'.
  Default value is 'slide' Show example

  $('#notification').miniNotification({
    effect: 'fade'
  });

• opacity (float)
  Notification opacity.
  Default value is 0.95 Show example

  $('#notification').miniNotification({
    opacity: 0.9
  });

• time (integer)
  Animation time in milliseconds.
  Default value is 4000 Show example

  $('#notification').miniNotification({
    time: 2500
  });

• showSpeed (integer)
  Show animation duration in milliseconds.
  Default value is 600 Show example

  $('#notification').miniNotification({
    showSpeed: 1000
  });

• hideSpeed (integer)
  Hide animation duration in milliseconds.
  Default value is 450 Show example

  $('#notification').miniNotification({
    hideSpeed: 100
  });

• showEasing (string)
  Easing equation on load.
  Default value is an empty string Show example

  $('#notification').miniNotification({
    showEasing: 'easeInOutQuad'
  });

• hideEasing (string)
  Easing equation on load.
  Default value is an empty string Show example

  $('#notification').miniNotification({
    hideEasing: 'easeInOutQuad'
  });

• innerDivClass (string)
  Inner wrapper element CSS class.
  Default value is 'inner' Show example

  $('#notification').miniNotification({
    innerDivClass: 'inner-notification'
  });

• closeButton (boolean)
  Generates the close button.
  Default value is false Show example

  $('#notification').miniNotification({
    closeButton: true
  });

• closeButtonText (string)
  Close button text content.
  Default value is 'close' Show example

  $('#notification').miniNotification({
    closeButtonText: 'hide'
  });

• closeButtonClass (string)
  Close button css class name.
  Default value is 'close' Show example

  $('#notification').miniNotification({
    closeButtonClass:'hide'
  });

• hideOnClick (boolean)
  Close notification on click event.
  Default value is false Show example

  $('#notification').miniNotification({
    hideOnClick: true
  });

• onLoad (function)
  Called when the notification is being loaded.
  Default value is empty Show example

  $('#notification').miniNotification({
    onLoad: function() {
      // Do what you want
    }
  });

• onVisible (function)
  Called when the notification is loaded.
  Default value is empty Show example

  $('#notification').miniNotification({
    onVisible: function() {
      // Do what you want
    }
  });

• onHide (function)
  Called when the notification is hiding.
  Default value is empty Show example

  $('#notification').miniNotification({
    onHide: function() {
      // Do what you want
    }
  });

• onHidden (function)
  Called when the notification is hidden.
  Default value is empty Show example

  $('#notification').miniNotification({
    onHidden: function() {
      // Do what you want
    }
  });

Connect

About

Matthieu Aussaguel

I am a Web Developer currently working at Envato as part of the Marketplace dev team in Melbourne, Australia. I focus mostly on Ruby/Rails technologies but I also enjoy coding in CoffeeScript in my spare time. Head over to my personal website and my Github page for more info about me.

Follow @mattaussaguel