Customizable Growl Notifications With Progress Bars – SimpleNotification

Category: Javascript , Notification | September 8, 2019
Author: Glagan
Views Total: 494
Official Page: Go to website
Last Update: September 8, 2019
License: MIT

Preview:

Customizable Growl Notifications With Progress Bars – SimpleNotification

Description:

The SimpleNotification JavaScript plugin helps developers create customizable, temporary, growl-style notifications with countdown progress bars on the page.

Also supports ‘Sticky’ mode that the notifications will always be visible until clicked.

Currently comes with 5 notification types: Success, Info, Error, Warning, and Message.

How to use it:

Download and import the SimpleNotification’s files into the document.

<link rel="stylesheet" href="src/simpleNotification.css">
<script src="src/simpleNotification.js"></script>

Create notifications with the following syntax.

// success notification
SimpleNotification.success(title, text, options);

// information notification
SimpleNotification.info(title, text, options);

// error notification
SimpleNotification.error(title, text, options);

// warning notification
SimpleNotification.warning(title, text, options);

// message notification
SimpleNotification.message(title, text, options);

Possible options to customize the notifications.

// options
{

  // image for notification
  image: undefined,

  // close on click
  closeOnClick: true,

  // top-left, top-right, bottom-left, bottom-center and bottom-right
  position: "top-right",

  // max number of notifications
  maxNotifications: 0,

  // remove all notifications when a new one is displayed
  removeAllOnDisplay: false,

  // duration in ms
  duration: 4000,

  // fadeout in ms
  fadeout: 750,

  // enable/disable sticky mode
  sticky: false,

  // insert-left
  // insert-right
  // insert-bottom
  // insert-top
  insertAnimation: {
    name: 'default-insert',
    duration: 250
  },

  // or rotateout
  removeAnimation: {
    name: 'fadeout',
    duration: 400
  }
  
}

Event handlers.

events: {
  onCreate: undefined,
  onDisplay: undefined,
  onDeath: undefined,
  onClose: undefined,
}

Changelog:

v1.3.1 (09/08/2019)

  • Fix notifications width on smaller screens

v1.3 (09/04/2019)

  • Added insertAnimation and removeAnimation options

09/01/2019

  • Add bottom-center position with animation

v1.2.2 (08/28/2019)

  • Add removeAllOnDisplay and maxNotifications options

v1.2.1 (08/08/2019)

  • Fix image shrinking problems and detection of undefined or empty strings in the content variable when creating a notification.

08/07/2019

  • New textToNode function to support nested tags

v1.1 (03/27/2019)

  • Notifications can now have a close button and the default click to close behavior can be disabled.

You Might Be Interested In:


Leave a Reply