Tiny Customizable jQuery Notification Plugin - Noti

Noti.js is a small yet customizable jQuery plugin used to display various types of toast-style sticky and/or temporary notification messages on the webpage.

How to use it:

1. The jQuery Noti.js plugin requires jQuery JavaScript loaded properly in the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/noti.js"></script>

2. Initialize the plugin and generate some notifications on the webpage.

noti
  .init({
      containerId: "noti",
      notiElClass: "notification",
      tapToDismiss: true,
      messageClass: "notification-message",
      itemClasses: [{
          type: "success",
          className: "success"
      }, {
          type: "error",
          className: "error"
      }, {
          type: "warning",
          className: "warning"
      }, ]
  })
  .createNoti({
      message: "Successfully running notifiy",
      type: "success",
      showDuration: 7,
      sticky: true,
      onClick: function() {
          noti.createNoti({
              message: "Notification clicked",
              type: "success",
              showDuration: 2
          })
      }
  })
  .createNoti({
      message: "Warning about something",
      type: "warning",
      showDuration: 5,
      onShow: function() {
          console.log("Showed")
      }
  })
  .createNoti({
      message: "Error something is wrong",
      type: "error",
      showDuration: 7,
      onClick: function() {
          noti.createNoti({
              message: "Error dismissed",
              type: "warning",
              showDuration: 3
          })
      }
  })

3. The primary CSS styles for the plugin.

#noti {
  position: absolute;
  margin-left: 35px;
  margin-top: 25px;
  display: block;
}

.notification {
  color: white;
  border-radius: 15px;
  padding: 15px;
  padding-right: 10px;
  margin-bottom: 15px;
  width: 15em;
  word-wrap: break-word;
}

4. Create your own CSS styles for different notification types.

.error { background-color: rgb(231, 76, 60) }

.success { background-color: rgb(46, 204, 113) }

.warning { background-color: rgb(241, 196, 15) }

.primary { background-color: rgb(52, 152, 219); }

---

This awesome jQuery plugin is developed by abdi42. For more Advanced Usages, please check the demo page or visit the official website.