Documentation

Notifier

Method Type Description
constructor(options) Instances the notifications manager with the given options.
notify(type, msg, time, callback) Notification Creates a new Notification object of the type type with the message msg. The notification will be shown (on push) for time miliseconds or default_time if not specified. The callback will be called right before the gracefully vanish (on clear).

Notifier Options

Attribute Type Default Description
autopush Optional Boolean true Whether the notifier has to automatically push notifications (on creation) or not.
position Optional string bottom-right Screen position of the notification. Allows top-left, top-right, bottom-left and bottom-right.
direction Optional string bottom The direction the notifications will be stacked:

top: The latest notification will show on top.

bottom: The latest notification will show at bottom.
zindex Optional int 9999 The CSS z-index the notifications container should have
default_time Optional number [Int] 4500 Number of miliseconds the notification will be visible if not specified.
vanish_time Optional number [Int] 300 Miliseconds the notification vanish animation will take.
fps Optional number [Int] 30 Frames per second of progress and vanish animations.
<type> Optional Notification Type success, error, warning, info You can define your own notification types or override existing ones. See Notification Type or the Example 4.

Notification

Method Type Description
push() void Displays the notification.
clear() void Vanishes the notification gracefully.
destroy() void Destroys the notification. Note it will not trigger the callback.

Notification Type

Attribute Type Description
classes string CSS classes that will be added to the notification.
icon string

HTML containing the icon. Something like:

<svg ...></svg>

<img ... />

<i ...></i>
textColor string Text color of the notification.
borderColor string Border color of the notification.
backgroundColor string Background color of the notification.
progressColor string Progress bar color.
iconColor string Icon color. This only applies for inline <svg> tags in icon.
iconClasses string CSS classes that will be added to the icon.

Examples

Example 1: Push notifications

push your notification using the type according to the message.

Code:
<script src="dist/Notifier.min.js"></script>
<script>
    (function () {
        var notifier = new Notifier();

        // Success 
        document.getElementById("ex1notify1").onclick = function () {
            notifier.notify("success", "Successfully logged in!");
        };

        // Info 
        document.getElementById("ex1notify2").onclick = function () {
            notifier.notify("info", "New message from <a href=\"https://github.com/jsanahuja/\" target=\"_new\">jsanahuja</a> received!");
        };

        // Warning
        document.getElementById("ex1notify3").onclick = function () {
            notifier.notify("warning", "Flood is not permitted, your chat will be temporary disabled");
        };

        // Error
        document.getElementById("ex1notify4").onclick = function () {
            notification = notifier.notify("error", "Invalid username or password");
        };

    })();
</script>

Example 2: Push, Clear and Destroy notifications

Set the autopush to false and push your notification and clear or destroy them prematurely.

Code:
<script src="dist/Notifier.min.js"></script>
<script>
    (function(){
        var notifier = new Notifier({
            autopush: false
        });

        var notifications = [];

        // Push 10 notifications
        document.getElementById("ex2notify1").onclick = function () {
            for(var i = 0; i < 10; i++){
                var notification = notifier.notify("info", "Notification "+ i);
                notification.push();
                notifications.push(notification);
            }
        };

        // Clear all notifications
        document.getElementById("ex2notify2").onclick = function () {
            for(var i = 0; i < notifications.length; i++){
                notifications[i].clear();
            }
            notifications = [];
        };

        // Destroy all notifications
        document.getElementById("ex2notify3").onclick = function () {
            for(var i = 0; i < notifications.length; i++){
                notifications[i].destroy();
            }
            notifications = [];
        };
    })();
</script>

Example 3: Using the callback

Set a callback to trigger actions after the notification.

Code:
<script src="dist/Notifier.min.js"></script>
<script>
    (function(){
        var notifier = new Notifier();

        var notification = null,
            counter = 0;

        // Start loop
        document.getElementById("ex3notify1").onclick = function () {
            if (notification !== null) {
                return;
            }
            var callback = function () {
                counter++;
                notification = notifier.notify("info", "This is the notification #" + counter, 3500, callback);
            }
            callback();
        };

        // Destroy notification. Clearing it would call the callback!
        document.getElementById("ex3notify2").onclick = function () {
            if (notification === null) {
                return;
            }
            notification.destroy();
            notification = null;
        };
    })();
</script>

Example 4: Define your own styles

Use the <type> option to define your own styles

All the icons, including the ones of this example, used by Notifier.js were taken from open-iconic

Code:
<script src="dist/Notifier.min.js"></script>
<script>
    (function(){
        var notifier = new Notifier({
            watch: {
                textColor: "#24292e",
                borderColor: "#c4c8cc",
                backgroundColor: "#fafbfc",
                progressColor: "#24292e",
                iconColor: "#24292e",
                icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><path d=\"M4.03 0c-2.53 0-4.03 3-4.03 3s1.5 3 4.03 3c2.47 0 3.97-3 3.97-3s-1.5-3-3.97-3zm-.03 1c1.11 0 2 .9 2 2 0 1.11-.89 2-2 2-1.1 0-2-.89-2-2 0-1.1.9-2 2-2zm0 1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1c0-.1-.04-.19-.06-.28-.08.16-.24.28-.44.28-.28 0-.5-.22-.5-.5 0-.2.12-.36.28-.44-.09-.03-.18-.06-.28-.06z\" transform=\"translate(0 1)\" /></svg>"
            },
            star: {
                textColor: "#24292e",
                borderColor: "#c4c8cc",
                backgroundColor: "#fafbfc",
                progressColor: "#24292e",
                iconColor: "#24292e",
                icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><path d=\"M4 0l-1 3h-3l2.5 2-1 3 2.5-2 2.5 2-1-3 2.5-2h-3l-1-3z\" /></svg>"
            },
            fork: {
                textColor: "#24292e",
                borderColor: "#c4c8cc",
                backgroundColor: "#fafbfc",
                progressColor: "#24292e",
                iconColor: "#24292e",
                icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><path d=\"M1.5 0c-.83 0-1.5.67-1.5 1.5 0 .66.41 1.2 1 1.41v2.19c-.59.2-1 .75-1 1.41 0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5c0-.6-.34-1.1-.84-1.34.09-.09.21-.16.34-.16h2c.82 0 1.5-.68 1.5-1.5v-.59c.59-.2 1-.75 1-1.41 0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5c0 .66.41 1.2 1 1.41v.59c0 .28-.22.5-.5.5h-2c-.17 0-.35.04-.5.09v-1.19c.59-.2 1-.75 1-1.41 0-.83-.67-1.5-1.5-1.5z\" /></svg>"
            }
        });
    
    
        document.getElementById("ex4notify1").onclick = function () {
            notifier.notify("watch", "Watched!");
        };
        document.getElementById("ex4notify2").onclick = function () {
            notifier.notify("star", "Starred!");
        };
        document.getElementById("ex4notify3").onclick = function () {
            notifier.notify("fork", "Forked!");
        };
    })();
</script>

Example 5: Position the notifications and set the stack direction

Use the position and direction options to change it.

Code:
<script src="dist/Notifier.min.js"></script>
<script>
    (function(){
        var notifierTR = new Notifier({
            position: 'top-right',
            direction: 'top'
        });
        var notifierTL = new Notifier({
            position: 'top-left',
            direction: 'top'
        });
        var notifierBL = new Notifier({
            position: 'bottom-left',
            direction: 'bottom'
        });
        var notifierBR = new Notifier({
            position: 'bottom-right',
            direction: 'bottom'
        });

        document.getElementById("ex5notify1").onclick = function () {
            notifierTL.notify("info", "I am on TOP LEFT!");
        };
        document.getElementById("ex5notify2").onclick = function () {
            notifierTR.notify("info", "I am on TOP RIGHT!");
        };
        document.getElementById("ex5notify3").onclick = function () {
            notifier.notify("info", "I am on BOTTOM LEFT!");
        };
        document.getElementById("ex5notify4").onclick = function () {
            notifier.notify("info", "I am on BOTTOM RIGHT!");
        };
    })();
</script>