Vanilla Javascript html notifications manager
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).
|
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:
|
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. |
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 . |
Attribute | Type | Description | |
---|---|---|---|
classes
|
string | CSS classes that will be added to the notification. | |
icon
|
string |
HTML containing the icon. Something like:
|
|
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. |
push
your notification using the type
according to
the message.
<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>
Set the autopush
to false and push
your notification and clear
or
destroy
them prematurely.
<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>
Set a callback
to trigger actions after the notification.
<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>
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
<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>
Use the position
and direction
options to change it.
<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>