Press "Enter" to skip to content

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

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.