Simple Yet Fully Customizable jQuery Notification Box - notify

File Size: 112 KB
Views Total: 1395
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Yet Fully Customizable jQuery Notification Box - notify

notify is a simple jQuery plugin for creating customizable auto-fading notification messages that can appear anywhere and anytime on your web page.

Basic Usage:

1. Load the jQuery notify plugin after jQuery Javascript library.

<link rel="stylesheet" href="path/to/jquery.notify.css">
<link rel="stylesheet" href="path/to/jquery.notify.fonts.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="path/to/jquery.notify.js"></script>

2. Create a basic notification on the top right of your web page.

$.notify('I am the Body');

3. Advanced usages.

  • afterClose: undefined: Callback executed after notice closes.
  • afterOpen: undefined: Callback executed after notice opens.
  • beforeClose: undefined: Callback executed before notice closes.
  • beforeOpen: undefined: Callback executed before notice opens.
  • body: undefined: Body of notice.
  • click: undefined: Callback executed when notice is clicked.
  • closeClick: true: If notice will be closed on click.
  • destroy: false: Removes the wrapper when there is no more notice on it.
  • forever: false: If notice will stay on screen forever.
  • hideTime: 1000: Time spent to hide the notice.
  • icon: undefined: Icon (font) name for the notice.
  • id: 'notify-item': Identifier to be used as class on notice.
  • image: undefined: Image path to be used into notice.
  • max: 5: Number maximum of noticies on screen.
  • minimizeTime: 300: Time spent to minimize the notice.
  • mouseout: undefined: Callback executed on mouse over the notice.
  • mouseover: undefined: Callback executed on mouse out the notice.
  • position: undefined: The place where notices will appears. top-left, top-right (default), bottom-left, bottom right
  • showTime: 400: Time spent to show the notice.
  • timeout: 5000: Time spent to initiates the other timeouts.
  • title: undefined: The notice title.
  • wrapper: '#notify': Where notices will be appended.
$.notify(OPTIONS);

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