Customizable HTML Push Notification Library Plugin | Notifierjs

HTML Push Notification – Notifier.js is a simple but totally configurable push notification library to point out toast and growl model messages within the backside proper corner of the web page. It creates a new notification object of a type with a message.

More Features:

• Allows you to attach the notifications to any container.
• 4 built-in themes: Success, Error, Warning, Info.
• Auto dismisses with a countdown bar.
• Allows you to create your individual themes (types).

How to make use of it:

1. Download & unzip the library after which load the minified model of the Notifier.js within the HTML file.

<link href="dist/Notifier.min.css" rel="stylesheet">
<script src="dist/Notifier.min.js"></script>

2. Initialize the Norifier.js and we’re ready to go.

var notifier = new Notifier();

3. Create push notifications utilizing built-in themes.

// Success
var notification = notifier.notify("success", "Success Message");
notification.push();

// Info
var notification = notifier.notify("info", "Info Message");
notification.push();

// Warning
var notification = notifier.notify("warning", "Warning Message");
notification.push();

// Error
var notification = notifier.notify("error", "Error Message");
notification.push();

4. Create your individual notification varieties (themes).

var notifier = new Notifier({
    "custom": {
      "classes": "my-class",
      "icon": "icon here"
    }
});

notification = notifier.notify("custom", "Custom Message");
notification.push();

.notifyjs-container .notifyjs-notification.my-class {
  /* CSS Styles Here */
}

.notifyjs-container .notifyjs-notification.my-class p.progress {
  /* CSS Styles Here */
}

.notifyjs-container .notifyjs-notification.my-class.notifyjs-icon {
  /* CSS Styles Here */
}

5. Determine whether or not to auto push the notification. Default: true.

var notifier = new Notifier({
    autopush: false
});

6. Specify the timeout. Default: 4500ms.

var notifier = new Notifier({
    default_time: 5000
});

7. Config the animation.

var notifier = new Notifier({
    vanish_time: 300,
    fps: 30
});

8. Determine the position & direction.

var notifier = new Notifier({
    // top-left, top-right, bottom-left and bottom-right
    position: 'bottom-right',
    // top, or bottom
    direction: 'bottom',
});

9. Customize the CSS z-index property.

var notifier = new Notifier({
    zindex: 9999
});

10. Override the default types of the notification.

var notifier = new Notifier({
    success: {
        classes: 'notifyjs-success',
        textColor: "#155724",
        borderColor: "#c3e6cb",
        backgroundColor: "#d4edda",
        progressColor: "#155724",
        iconColor: "#155724",
        // iconClasses: "",
        icon: ''
    },
    error: {
        classes: 'notifyjs-danger',
        textColor: "#721c24",
        borderColor: "#f5c6cb",
        backgroundColor: "#f8d7da",
        progressColor: "#721c24",
        iconColor: "#721c24",
        // iconClasses: "",
        icon: ''
    },
    warning: {
        classes: 'notifyjs-warning',
        textColor: "#856404",
        borderColor: "#fff3cd",
        backgroundColor: "#ffeeba",
        progressColor: "#856404",
        iconColor: "#856404",
        // iconClasses: "",
        icon: ''
    },
    info: {
        classes: 'notifyjs-info',
        textColor: "#0c5460",
        borderColor: "#d1ecf1",
        backgroundColor: "#bee5eb",
        progressColor: "#0c5460",
        iconColor: "#0c5460",
        // iconClasses: "",
        icon: ''
    }
});

11. Dismiss all notifications.

notification.clear();

12. Destroy the library.

notification.destroy();

Customizable Push Notification Library, Push Notifications in JavaScript, Bootstrap Notification Popup

See Demo And Download

Official Website(jsanahuja): Click Here

This superior jQuery/javascript plugin is developed by jsanahuja. For extra Advanced Usages, please go to the official website.

Tags: Bootstrap Notificationhtml notification popupjsanahujaNotifierjsNotifierjs GithubPush Notification