Tiny Custom Notification JavaScript Library – Notify

Preview:

Description:

A lightweight, standalone and highly customizable JavaScript library for generating top or bottom notification bars with different types for your website or web application.

How to use it:

Load the notify.microlib.js JavaScript in the html file.

<script src=src/notify.microlib.js"></script>

Show a timed notification for 3 seconds.

var notification = Micro.notify({
    title: "Timed!",
    message: "I'm a timed notification. You only see me for 3 seconds!",
    type: "timed",
    timeShow: 3000
});

Show a bottom notification which is dismissable and has a custom class and shows automatically.

var notificationTwo = Micro.notify({
    title: "Dismissable!",
    message: "Dismiss me using the close button on the right. And I show automatically",
    type: "dismissible",
    position: "bottom",
    autoShow: true,
    className: "success"
});

Add custom styles to the notification bars.

.notification {
  width: 100%;
  height: 50px;
  text-align: center;
  position: absolute;
  left: 0;
  line-height: 50px;
  background: #e7e7e7;
  display: none;
}
.notification.visible { display: block; }
.notification-success {
  background: green;
  border-color: darkgreen;
  color: white;
}
.notification.top {
  top: 0;
  border-bottom: 1px solid #ccc;
}
.notification.bottom {
  bottom: 0;
  border-top: 1px solid #ccc;
}
.notification a {
  cursor: pointer;
  position: absolute;
  right: 20px;
}

All customization options.

// Set the title to a value which can be used in other functions
title: "Timed!",
// Set the message to a value which can be used in other functions
message: "I'm a timed notification. You only see me for 3 seconds!",
// notification type
type: "timed",
// the time the notification is shown
timeShow: 5000,
// the notification position
position: "top",
// auto show the notification
autoShow: true,
// the class name extension
className: "success",
// keep a record of if this notification is visible
visible: false,
// the element we want to manipulate on the page. 
// Created via the createElement function.
notificationElement: ""