Vanilla Javascript HTML notifications

Notifier.js is an easy yet fully configurable push notification library to show toast and growl style messages in the bottom right corner of the page.

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 own themes (styles).

How to use it:

1. Download & unzip the library and then load the minified version of the Notifier.js in 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 using built-in themes.

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

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

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

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

4. Create your own notification types (themes).

var notifier = new Notifier({
    "custom": {
      "classes": "my-class",
      "icon": "icon here"
    }
});
notification = notifier.notify("custom", "<b>Custom</b> 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 styles of the notification.

var notifier = new Notifier({
    success: {
        classes: 'notifyjs-success',
        textColor: "#155724",
        borderColor: "#c3e6cb",
        backgroundColor: "#d4edda",
        progressColor: "#155724",
        iconColor: "#155724",
        // iconClasses: "",
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M6.41 0l-.69.72-2.78 2.78-.81-.78-.72-.72-1.41 1.41.72.72 1.5 1.5.69.72.72-.72 3.5-3.5.72-.72-1.44-1.41z" transform="translate(0 1)" /></svg>'
    },
    error: {
        classes: 'notifyjs-danger',
        textColor: "#721c24",
        borderColor: "#f5c6cb",
        backgroundColor: "#f8d7da",
        progressColor: "#721c24",
        iconColor: "#721c24",
        // iconClasses: "",
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" /></svg>'
    },
    warning: {
        classes: 'notifyjs-warning',
        textColor: "#856404",
        borderColor: "#fff3cd",
        backgroundColor: "#ffeeba",
        progressColor: "#856404",
        iconColor: "#856404",
        // iconClasses: "",
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M3.09 0c-.06 0-.1.04-.13.09l-2.94 6.81c-.02.05-.03.13-.03.19v.81c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-.81c0-.05-.01-.14-.03-.19l-2.94-6.81c-.02-.05-.07-.09-.13-.09h-.81zm-.09 3h1v2h-1v-2zm0 3h1v1h-1v-1z" /></svg>'
    },
    info: {
        classes: 'notifyjs-info',
        textColor: "#0c5460",
        borderColor: "#d1ecf1",
        backgroundColor: "#bee5eb",
        progressColor: "#0c5460",
        iconColor: "#0c5460",
        // iconClasses: "",
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M3 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-1.5 2.5c-.83 0-1.5.67-1.5 1.5h1c0-.28.22-.5.5-.5s.5.22.5.5-1 1.64-1 2.5c0 .86.67 1.5 1.5 1.5s1.5-.67 1.5-1.5h-1c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-.36 1-1.84 1-2.5 0-.81-.67-1.5-1.5-1.5z" transform="translate(2)"/></svg>'
    }
});

11. Dismiss all notifications.

notification.clear();

12. Destroy the library.

notification.destroy();

Changelog:

v1.2.4 (08/29/2020)

• Fixed type classes was not being applied

v1.2.2 (05/02/2020)

• Added z-index option

Download Details:

Author: jsanahuja

Demo: https://www.sowecms.com/demos/Notifier.js/

Source Code: https://github.com/jsanahuja/Notifierjs

#javascript