How to use?
Very Simple!
- Download the project.
- Export the files.
- Copy the files "notifier.min.css" and "notifier.min.js" into your project.
- Import the CSS into
<header> - Import the JS before closing the
<body> - Enjoy! ;)
Default Notifications
notifier.show('Hello!' , 'I am a default notification.', '', '', 0);
notifier.show('Reminder!', 'You have a meeting at 10:30 AM.', '', '', 0);
notifier.show('Well Done!', 'You just submit your resume successfuly.', '', '', 0);
notifier.show('Warning!' , 'The data presented here can be change.', '', '', 0);
notifier.show('Sorry!', 'Could not complete your transaction.', '', '', 0);
Notifications With Icons
notifier.show('Default!' , 'I am a default notification.', '', 'img/clock-48.png', 0);
notifier.show('Reminder!', 'You have a meeting at 10:30 AM.', '', 'img/survey-48.png', 0);
notifier.show('Well Done!', 'You just submit your resume successfuly.', '', 'img/ok-48.png', 0);
notifier.show('Warning!' , 'The data presented here can be change.', '', 'img/medium_priority-48.png', 0);
notifier.show('Sorry!', 'Could not complete your transaction.', '', 'img/high_priority-48.png', 0);
Auto Close Notifications
notifier.show('Default!' , 'I am a default notification.', '', 'img/clock-48.png', 4000);
notifier.show('Reminder!', 'You have a meeting at 10:30 AM.', '', 'img/survey-48.png', 4000);
notifier.show('Well Done!', 'You just submit your resume successfuly.', '', 'img/ok-48.png', 4000);
notifier.show('Warning!' , 'The data presented here can be change.', '', 'img/medium_priority-48.png', 4000);
notifier.show('Sorry!', 'Could not complete your transaction.', '', 'img/high_priority-48.png', 4000);
Using the notification.hide() method
The method notification.show() always returns the notification's ID that was openned. We can store this ID in a variable
to call the method notification.hide() passing this ID to shut the notification anywhere we want.
See the example:
var notificationId;
var showNotification = function () {
notificationId = notifier.show('Reminder!', 'You have a meeting at 10:30 AM.', '', 'img/survey-48.png', 4000);
};
var hideNotification = function () {
notifier.hide(notificationId);
};
document.querySelector('#btn-nt-show').addEventListener('click', showNotification);
document.querySelector('#btn-nt-hide').addEventListener('click', hideNotification);
Methods
notifier.show(title, msg, type, icon, timeout);
| Parameter | Description |
|---|---|
| title | Notification's title. |
| msg | Notification's text. |
| type |
Notification's color. Possible Values: '', info, success, warning, danger |
| icon |
Path to the image that will be displayed inside the notification. For example: 'img/icon.png' |
| timeout |
Time in miliseconds to close the notification automatically. Only works if the value passed is greater than zero |
| Return: | Notification's ID |
notifier.hide(notificationId);
You can use this method to shut the notification by Javascript
| Parameter | Description |
|---|---|
| notificationId | Notification's ID |
| Return: |
|