Simple Customizable jQuery Notification Plugin - Not1f1cat1ons

File Size: 6.37 KB
Views Total: 274
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Customizable jQuery Notification Plugin - Not1f1cat1ons

Not1f1cat1ons is a minimal jQuery-dependent notification library that helps you create notifications of various types sliding out from the edge of the screen when triggered. No CSS required. Highly customizable via JavaScript.

Basic usage:

1. Load the latest version of jQuery library and the jQuery Not1f1cat1ons plugin in the html file.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="not1f1cat1ons-0.1.js"></script>

2. Create a DIV container for the notification bars.

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

3. Create a new Not1f1cat1ons object and specify the target container in which you want to place the notifications.

var myNotify = new Not1f1cat1ons("notify-container");

4. Show notifications with custom content & types using triggerNotification() as follows.

notify1.triggerNotification("success", "Success message");
notify1.triggerNotification("warning", "Warning message");
notify1.triggerNotification("alert", "Alert message");
notify1.triggerNotification("info", "Info message");

5. Config the notification bars by passing the following parameters to the Not1f1cat1ons().

// Not1f1cat1ons(element_class_name, animation, hidden_position, visible_position, default_style, success_style, alert_style, warning_style)
var animation = {
  show_duration: 1000,
  visible_duration: 4000,
  hide_duration: 500,
  direction: "left"
};
var hidden_position = {
  "position": "absolute",
  "top":    "500px",
  "left":   "-302px"
};
var visible_position = {
  "position": "absolute",
  "top":    "500px",
  "left":   "-2px"
};
var default_style = {
  "border":     "none",
  "box-shadow":   "grey"
};
var success_style = {
  "background-color":   "black",
  "font-size":      "1.5em"
};
var alert_style = {
  "background-color":   "grey",
  "font-size":      "1em"
};
var warning_style = {
  "background-color":   "orange",
  "font-size":      "0.5em"
};
var info_style = {
  "background-color":   "yellow",
  "font-size":      "1.1em"
};

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