Creating CSS3 Animated Notifications with JavaScript – Messg.js

Category: Javascript , Notification , Recommended | July 11, 2018
Author: andrepolischuk
Views Total: 1,382
Official Page: Go to website
Last Update: July 11, 2018
License: MIT

Preview:

Creating CSS3 Animated Notifications with JavaScript – Messg.js

Description:

Messg.js is a pure JavaScript library helps you creating various types of notification messages with CSS3 animations.

How to use it:

Load the required messg.js and messg.css in your document as follow.

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

Basic usage:

messg.default('Your text', DELAY)
messg.success('Your text', DELAY)
messg.info('Your text', DELAY)
messg.warning('Your text', DELAY)
messg.error('Your text', DELAY)

Add yes/no/ok buttons.

messg
  .warning('Are you sure?')
  .button('Yes', function() {

  })
  .button('No', function() {

  });

messg
  .success('Task completed')
  .button('Ok');

Add hide handler.

messg
  .warning('Hello!')
  .hide(function() {

  });

More configuration options.

// animation speed in ms
Message.speed = 250

/* top
  top-left
  top-right
  bottom
  bottom-left
  bottom-right */
Message.position = 'top'

// enable/disable messages flow
Message.flow = true

// max flow length
Message.max = null

Changelog:

07/11/2018

  • v2.2.0

Leave a Reply