Notifier

Bealtiful notifications with CSS and Vanilla JavaScript!

Working in a project that needs a solution for display notifications? Good news \o/
Notifier can helps you with this task! Just import it into your project and start to use!

Download ZIP GitHub Project

How to use?

Very Simple!

  1. Download the project.
  2. Export the files.
  3. Copy the files "notifier.min.css" and "notifier.min.js" into your project.
  4. Import the CSS into <header>
  5. Import the JS before closing the <body>
  6. 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:
  • true - If the notification was closed
  • false - If the notification was not closed

Supported Browsers