Minimal Animated Notification Plugin with jQuery and CSS3 - miniNoty

A super simple and lightweight jQuery plugin which pops up steam notifications with CSS3 based animations at bottom right corner of your web/app page.

How to use it:

1. Load the jQuery library and jQuery miniNoty plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.miniNoty.js"></script>

2. Add the following CSS snippet into your CSS file.

.miniNoty {
  position: fixed;
  right: 10px;
  bottom: -10px;
  padding: 10px 15px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  max-width: 300px;
  min-width: 150px;
  opacity: 0;
  z-index: 101;
  -webkit-transform: scale(1, 0);
  -moz-transform: scale(1, 0);
  -o-transform: scale(1, 0);
  -ms-transform: scale(1, 0);
  transform: scale(1, 0);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.miniNoty-show {
  bottom: 10px;
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
}

.miniNoty-success {
  background: mediumseagreen;
  box-shadow: 0 2px 5px mediumseagreen;
}

.miniNoty-error {
  background: indianred;
  box-shadow: 0 2px 5px indianred;
}

.miniNoty-normal {
  background: lightgrey;
  box-shadow: 0 2px 5px lightgrey;
  color: #000;
}

.miniNoty-warning {
  background: goldenrod;
  box-shadow: 0 2px 5px goldenrod;
}

3. Create a link to trigger a notification box. Use CSS class to specify the notification type you wish to use.

<a class="success" title="" href="">Success</a>
<a class="normal" title="" href="">Normal</a>
<a class="error" title="" href="">Error</a>
<a class="warning" title="" href="">Warning</a>

4. Initialize the plugin. That's it.

window.onload = function(){
$('a').click(function () {
$.miniNoty('Your message goes here!', $(this).attr('class'))
return false;
})
}

5. Available setting for the notification boxes.

$.miniNoty({
  'class': 'miniNoty',
  timeoutToHide: 3000,  // timeout to hide
  timeoutAnimEnd: 500, // timeout animate in SCSS
  view: 'normal',
  autoHide: true,
  message: '',
  buttons: [
    {
      isClose: 1,
      name: 'Close',
      link: '#',
      target: '',
      click: function(){
        $(this).parent().click()
        return false;
      }
    }
  ],
  allowButtonClose: false,
  redirect: false, // url
  blank: false // target=_blank
})

6. Public methods.

$.miniNotyConfig.get() // get global config
$.miniNotyConfig.set({ // set global config
  timeoutToHide: 6000, // any params
  timeoutAnimEnd: 1000
})

Change log:

2016-071-14

• JS update.

2015-08-27

• Changed color for default

2015-08-25

• Added methods

2015-07-09

• Added option redirect of click on message.

2015-07-07

• Fix: allowButtonClose is not defined

 

---

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