Lightweight Pretty jQuery Notification Box Plugin - notiJ

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

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.