Simple Lightweight JavaScript Notifications Solution

Preview:

Description:

A lightweight, simple-to-use JavaScript plugin to create temporary or permanent notification messages sliding out from the right side of the webpage.

How to use it:

Install & download  the library with NPM:

# NPM
$ npm install simple-notifications-solution --save

Import the necessary JavaScript and CSS files into the page.

<link rel="stylesheet" href="/path/to/Notifications.css">
<script src="/path/to/Notifications.js"></script>

Create a new notifications object and initialize the notification library.

var notifications = new Notifications(".notification");
notifications.init();

Create a permanent notification message that will always stay on the screen until you click the close button.

<p class="notification">
  This is a notification
  <button class="delete" type="button">Close</button>
</p>

Create a toast-like temporary notification message that will auto dismiss itself after a timeout.

<p class="notification" data-close="self">
  This is a toast notification
</p>

Default options to customize the notification messages.

notifications.init({
  // animation
  animationInName: 'slidein',
  animationOutSelf: 'slideout 1s',
  animationOutClose: 'fadeout 1s',
  // selector of close button
  closeButtonSelector: '.delete',
  // click to close
  closeSelfOnClick: true,
  // start top position
  startTopPosition: 8,
  // space between messages
  gap: 8,
  // delay in milliseconds
  delayFunction: function delayFunction(i) {
      return 3 + 2 * i;
  },
  // top transition
  topTransition: 'top .75s ease-in-out'
  
});

Changelog:

10/07/2018

• add startTopPosition option