What is Z-Notif ?

Z-Notif is a javascript plugin that lets you create notifications very easily. The notifications will appear on the top right corner of your screen, you can click them and they will disapear.

It was just an exercise for me to practice object oriented programmation and method in vanillaJs.

Demo

Note Success Warning Error

How to

This plugin is very simple. You just have to create an instance of the ZNotif Class each time you want to display one. It can be any event you want.

Some parameters are available:

• TYPE: (Default: "note") the notification type :
  • "note" : Blue notification.
  • "success" : Green notification.
  • "warning" : Orange notification.
  • "error" : Red notification.
• TEXT : (Default: "Hello, World!") the text that will be inserted.
• DURATION : (Default: 3000) how long will the notification be displayed. (milliseconds)
• PREPEND : (Default: true) whether the notification type will prepend the notification content.

Examples

Link click + no argument

This will show the default notification when the link is clicked.

<a href="#" id="test1">Test 1</a>

var test1 = document.getElementById("test1");
test1.addEventListener('click', function(e){
   new ZNotif();
   e.preventDefault;
});

Test 1

Button click + 2 arguments

When you click the button, A success notification will be displayed withe the text you specified.

<button id="test2">Test 2</button>

var test2 = document.getElementById("test2");
test2.addEventListener('click', function(e){
   new ZNotif("success", "I successfully made a beautiful notification!");
   e.preventDefault;
});

Test 2

Hover + 3 arguments

When your mouse pointer hovers over the area, a warning notification shows up and stays there for 1 second (1000ms).

<a href="#" id="test3">Test 3</a>

var test3 = document.getElementById("test3");
test3.addEventListener('mouseover', function(e){
   new ZNotif("Warning", "My cat will eat your mouse pointer!", 1000);
   e.preventDefault;
});

Input keyup + 4 arguments

When you are typing in the input, on each keyup, a notification shows up with the inputs value as a content textand disapears in 500ms.

<a href="#" id="test4">Test 4</a>

var test4 = document.getElementById("test4");
test4.addEventListener('keyup', function(e){
   var newtext = "" + test4.value;
   new ZNotif("error", newtext, 500, false);
   e.preventDefault;
});

Suggestions, issues, etc... are welcome, on the github issue section.