jQuery Windows 8-Style Notification Plugin - notific8

notific8 is a jQuery plugin inspired by Windows 8 notification that helps create animated notifications which slide in and out from the upper right corner of the page.

You might also like:

• Enable Win8 Metro Interfaces Easily - Metro.js
• BootMetro - Metro Style Web Framework
• Stackoverflow Like Notification Bar for jQuery - Howdy-do
• Smooth Sliding Notification Bar Plugin - msgTips
• Elegant iOS-like Notification Plugin - ClassyNotty
• JS Notification Plugin For Bootstrap or jQuery UI - Pines Notify
• Simple Notification Bar Plugin - jBar
• Alertify - Customizable jQuery Notification Plugin
• noty - Cool Jquery Notification Plugin
• Cool Animated Notification Plugin with jQuery - jGrowl

Basic Usage:

1. Include jQuery Library and notific8.js in the head section of your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.notific8.min.js"></script>

2. Include Theme CSS

<link href="jquery.notific8.min.css" media="screen" rel="stylesheet" type="text/css" />

3. The Javascript

$.notific8('My notification with all options.', {
  // number of milliseconds that the notification will be visible
  life: 5000, 

  // short heading for the notification
  heading: 'Notification Heading', 

  // teal, amethyst,ruby, tangerine, lemon, lime, ebony, smoke
  theme: 'amethyst', 

  // boolean for whether or not the notification should stick
  sticky: true, 

  // string value for top or bottom of the page
  horizontalEdge: 'bottom', 

  // string value for left or right of the page
  verticalEdge: 'left', 

  // integer value for the z-index
  zindex: 1500,

  // set an icon for notifications
  icon: false,

  // string for the text on the close button
  closeText: 'close',

  // callbacks
  onInit: null,
  onCreate: null,
  onClose: null
});

4. Full usages.

// basic
$.notific8('My notification message goes here.');
// with a life set
$.notific8('My notification message has a life span.', {life: 5000});
// with a heading
$.notific8('My notification has a heading line.', {heading: 'Notification Heading'});
// with an icon
$.notific8('My notification has an icon.', {icon: 'check-mark-2'});
// with a theme
$.notific8('My notification has a theme.', {theme: 'amethyst'});
// make the notification sticky
$.notific8('My notification is sticky.', {sticky: true});
// change whether to notification is at the top or bottom
$.notific8('My notification is at the bottom.', {horizontalEdge: 'bottom'});
// change whether to notification is on the left or right
$.notific8('My notification is on the left.', {verticalEdge: 'left'});
// set the z-index
$.notific8('My notification has a z-index of 1500.', {zindex: 1500});
// with custom close text
$.notific8('Custom close text.', {closeText: 'près');
// onInit event
$.notific8('onInit event example.', {
  onInit: function(data) {
    console.log('--onInit--');
    console.log('data:');
    console.log(data);
  }
}
// onCreate event
$.notific8('onCreate event example.', {
  onCreate: function(notification, data) {
    console.log('--onCreate--');
    console.log('notification:');
    console.log(notification);
    console.log('data:');
    console.log(data);
  }
}
// onClose event
$.notific8('onClose event example.', {
  onClose: function(notification, data) {
    console.log('--onClose--');
    console.log('notification:');
    console.log(notification);
    console.log('data:');
    console.log(data);
  }
}
// all options set
$.notific8('My notification with all options.', {
  life: 5000,
  heading: 'Notification Heading',
  icon: 'check-mark-2',
  theme: 'amethyst',
  sticky: true,
  horizontalEdge: 'bottom',
  verticalEdge: 'left',
  zindex: 1500,
  closeText: 'près',
  onInit: function(data) {
    console.log('--onInit--');
    console.log('data:');
    console.log(data);
  },
  onCreate: function(notification, data) {
    console.log('--onCreate--');
    console.log('notification:');
    console.log(notification);
    console.log('data:');
    console.log(data);
  },
  onClose: function(notification, data) {
    console.log('--onClose--');
    console.log('notification:');
    console.log(notification);
    console.log('data:');
    console.log(data);
  }
});

// set up your own default settings to save time and typing later
// NOTE this is not required
$.notific8('configure', {
  life: 5000,
  theme: 'ruby',
  icon: 'minus-circle',
  sticky: true,
  horizontalEdge: 'bottom',
  verticalEdge: 'left',
  zindex: 1500,
  closeText: 'près'
});

// set the zindex
$.notific8('zindex', 1500);

// destroy the plug-in's foot print (can be initialized by calling the plug-in again)
$.notific8('destroy');

// remove all visible notifications but leaves the plug-in's foot print
$.notific8('remove');

Change Logs:

v2.1.1 (2015-09-15)

• Fixes: height for atomic is now nested properly

v2.1.0 (2015-09-08)

• Created the Atomic theme family

v2.0.1 (2015-09-06)

• Move default themes out of theme family files
• Handling side sizing for ChicChat bug being in main code instead of themed

v2.0.0 (2015-07-19)

• Theme families were added for version 2.0. If you were generating custom themes in the past, please update your SASS files to call the notific8_legacy_theme mixin instead of the old theme mixin. As new mixins are added, their mixins will be named with the following formula notific8_[theme name]_theme
• Added the ChicChat theme family inspired by the built in notifications for HipChat
• Removed the times icon from the sticky close notifications because of reduncancy

v1.7.0 (2015-01-31)

• adds a remove function

v1.6.0 (2015-01-07)

• adds events to the plug-in

v1.5.0 (2014-12-10)

• adds closeText option

v1.4.0 (2014-10-01)

• Cleaned up the SCSS

v1.3.1 (2014-09-30)

• Fixed: no edge value set bug

v1.3.0 (2014-09-11)

• add ability to set an icon for notifications

v1.2.1 (2014-09-06)

• Fixed: variable name mismatch after refactoring fixed

v1.2.0 (2014-08-06)

• adds CSS transitions support

v1.1.1 (2014-07-26)

• Added SASS support.

v0.9.2 (2013-11-06)

• FIXED: moved show/hide of close button to the CSS where it belongs
• Put themes in their own SASS file so that they can be excluded for custom theme generation

v0.8.1 (2013-11-05)

• FIXED: all notifications have a close button on hover
• FIXED: reduces queries for the body tag

v0.7.1 (2013-09-17)

• FIXED: multiple notifications called at once now work properly

v0.7.0 (2013-05-18)

• all notifications have a close button on hover

v0.6.0 (2013-03-22)

• Added z-index property and function
• Fixing right-aligned sticky notifications

v0.5.1 (2013-03-12)

• Fixes text positioning bug for left side notifications

v0.5.0 (2013-03-11)

• Added ability to set the corner of the page for the notification

v0.4.0 (2013-03-09)

• Added the configure function

$.notific8('configure', {
  life: 5000,
  theme: 'ruby',
  sticky: true
});

v0.3.1 (2013-03-09)

• Fixed bug in IE9+ for close in sticky notifications

 

---

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