Clean Growl Notification JavaScript Library – notificationJS

notificationJS is a lightweight, dependency(jQuery)-free JavaScript library for displaying pretty clean growl-style notification popups on the web app.

The notification library currently comes with 3 styles: info, error and ok.

You can specify the timeout to determine whether or not auto dismiss the notification popups.

How to use it:

Insert the main JavaScript file notificationJS.js into the document.

<script src="notificationJS.js"></script>

Create a new notification popup like this:

newNotification({
  "title":"This is just info",                     
  "status":"info",                        
  "description":"Small description about the notification"
})

Apply your own CSS styles to the notification popup.

.notification-panel {
  position: fixed;
  bottom: 25px;
  right: 25px;
}
.notification-panel__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notification__ok { border-top: 5px solid #27ae60 !important; }
.notification__error { border-top: 5px solid #c0392b !important; }
.notification__title {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
}
.notification__description {
  font-size: 14px;
  margin-top: 5px;
}
.notification__link { font-weight: 600; }
.notification-right {
  margin-left: 15px;
  cursor: pointer;
}
.notification_icon { width: 10px; }

More configuration options.

newNotification({
  "status": "info", // or 'ok', 'error'
  "time": 5, // auto close after 5 seoncs                                                 
  "hide": true, // auto hides after a timeout                                               
  "animation_duration": 0.2,                                   
  "showCloseIcon": true,                                     
  "newestOnTop": true,                                       
  "debug": true    
})

Changelog:

07/25/2018

• Bugfix