Lightweight Pretty jQuery Notification Box Plugin - notiJ

Lightweight Pretty jQuery Notification Box Plugin - notiJ
File Size: 11.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

notiJ is a small jQuery plugin to create animated and customizable notification boxes that can be placed anywhere on your web page. The plugin comes with 3 built-in notification types for your practical needs: normal, error and information.

How to use it:

1. Load the jQuery library and the jQuery notiJ plugin on the web page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="notiJ.js"></script>

2. Create your custom notification messages in the Javascript.

$.notij('Your Message Here.',OPTIONS);

3. Or load messages from a specific elemene.

$('p').notij(OPTIONS);

4. All the options and defaults.

$.notij('Your Message Here.',{
  'speed': 'fast', // fast, slow, or number eg: 100
  'multiple': true, // multiple instances on one page
  'autoclose': 5000, // set timeout speed
  'onfocusdelay': true, // keep dialog open 
  'type' : 'default' // default, error or info  
});

5. Add the following CSS rules into your CSS file or include the notiJ.css directly in the head section of your web page. Tweak or override the styles to change the color or position of the notification boxes to fit your needs.

div.notij-que {
  position: fixed;
  width: 200px;
  left: 10px;
  bottom: 10px;
}

div.notij {
  font-size: 12px;
  color: #555;
  display: none;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

div.notij-msg {
  padding-right: 20px;
  font-size: 12px;
  color: #FFF;
}

.notij-close {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 14px;
  width: 14px;
  cursor: pointer;
  font-weight: 800;
}

.theme_default { background: #414141; }

.close_default { color: #999; }

.theme_error { background: #FF3333; }

.close_error { color: #FFEDFD; }

.theme_info { background: #0099FF; }

.close_info { color: #33CCFF; }

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