A Simple Growl Notification Library in Vanilla JavaScript | SimpleNotification

SimpleNotification is a library for displaying simple but customizable notifications. You can format text with a simple structure, add buttons to make notifications interactive, and add callbacks to some events during the notice period.

You simply need to include simpleNotification.css, simpleNotification.js (or the minified versions) and you’re ready to go!

How to make use of it:

Download and import the SimpleNotification’s information into the doc.

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

Create notifications with the next 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 choices 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,

  // pause on hover
  pauseOnHover: true,

  // 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,
}

Options

There are a few options that you can set by using SimpleNotification.options(object) or more specifically for a single notification on the third parameter.

NameDescriptionDefault
durationThe time (in ms) that the notification is displayed.4000
positionValid positions: top-lefttop-centertop-rightbottom-leftbottom-center and bottom-right.“top-right”
stickyIf true, the notification will not disappear until the user clicks it or its close button.false
closeButtonIf true, a close button will be added either on the title or the content.true
closeOnClickIf true, clicking anywhere in the notification will close it.true
removeAllOnDisplayIf true, all notifications will be cleared before the new one is added to the screen.false
maxNotificationsIf >0, notifications (starting with oldest) will clear out until the number displayed is less than or equal to the specified option.0
eventsObject with events functions. 
insertAnimationObject with CSS class name and duration.{ name: 'default-insert', duration: 250 }
removeAnimationObject with CSS class name and duration.{ name: 'fadeout', duration: 400 }
displayDisplay the notification when creating it.true

Customizable Growl Notifications With Progress Bars, Simple Notification Plugin/Github


See Demo And Download

Official Website(Glagan): Click Here

This superior jQuery/javascript plugin is developed by Glagan. For extra Advanced usage, please go to the official website.

Share