Simple Flat Growl Notification Plugin For jQuery - notiflat

Notiflat is a simple, flexible jQuery plugin used to display flat-style growl notifications that auto dismiss within a specified time. With optional CSS3 animations based on Animate.css.

More features:

• 5 types of notifications: success, warning, info, loading and error.
• Custom animation speed.
• onClose and onStart callbacks.
• Click on the notification or close button to close.
• Custom positions.

How to use it:

1. Include the notiflat.min.css in the head section that will provide the primary CSS styles for your notification.

<link rel="stylesheet" href="notiflat.min.css">

2. Include the Animate.css CSS library for awesome CSS3 animations.

<link rel="stylesheet" href="animate.min.css">

3. Include the latest version of jQuery library and the notiflat.js script at the end of the document.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="notiflat.js"></script>

4. Create a default notification that will auto dismiss after 4000ms.

$.notiflat('Hello World', { 
  // options go here 
});

5. Options and callbacks available.

$.notiflat('Hello World', { 

  // 'success','warning','loading','info','error'
  type: 'success',

  // position
  position: 'top left',

  // timeout in ms
  timeout: 4000,

  // 'fade' or 'slide'
  animation: 'fade',

  // animation speed
  animationSpeed: 'slow',

  // Animate.css animations
  animateIn: null,
  animateOut: null,

  // 'button' or 'self'
  close: 'button',

  // shows shadow
  shadow: false,

  // callbacks
  onClose: function() {},
  onStart: function() {}
  
});

Change log:

2016-02-12

• v0.1

---

This awesome jQuery plugin is developed by tiagomfs. For more Advanced Usages, please check the demo page or visit the official website.