Customizable Growl Notifications With Progress Bars – SimpleNotification

Category: Javascript , Notification | March 27, 2019
Author: Glagan
Views Total: 237
Official Page: Go to website
Last Update: March 27, 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 and bottom-right
  position: "top-right",

  // duration in ms
  duration: 4000,

  // fadeout in ms
  fadeout: 750,

  // enable/disable sticky mode
  sticky: false
  
}

Changelog:

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