notiJ is a small jQuery plugin to create animated and customizable notification which can be use with any jQuery based applications.
The plugin comes with 3 built-in notification themes for your practical needs: default, error and information.
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>
- Create your custom notification messages in the Javascript.
$.notij('Your Message Here.',OPTIONS);
$('#btn').click(function(){
$.notij('Ayubowan, Sri Lanka',{'theme':'info'});
});
- Or load messages from a specific element. (Use elements as notifiers)
<p> Ayubowan Sri Lanka </p>
$('p').notij(OPTIONS);
speed : 'fast', // fast, slow, or number eg: 100
multiple : true,
autoclose : 5000, // set timeout speed
onfocusdelay : true, // keep dialog open on mouseover
theme : 'default' // Theme default, error, info
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.
default
basic color theme.error
can be use to prompt errors or special notifications.info
colored with #33CCFF to show information.
.theme_default {
background:#414141;
}
.close_default {
color:#999;
}
Find notij-demo here.