kiNotice: A jQuery Notification Plugin
There are a few ways you can introduce a notification message window to a visitor; at the top, in the middle, or at the bottom of the screen (the side are usually reserved for ads and widgets like social media icons). I for one personally think that the best place to put your notification without the risk of obstructing your visitor’s view of your site is at the bottom of the page, which brings us to the main focus of this article.
Serban Ghita developed and introduced a nice versatile jQuery plugin called kiNotice that lets you put a nifty notification box at the bottom right corner of the page. There are eight different styles for you to choose from.
Below are some random examples and the code you put in your HTML to call in the plugin:
<script type="text/javascript" src="jquery.kinotice.js"></script> <link type="text/css" rel="stylesheet" href="kinotice.css" />
Static string example:
$.fn.kiNotice({
autoOpen: true,
hideOnClose: true,
title: 'Today\'s announcement',
content: '<p>Quisque a nunc felis, vel bibendum diam. Phasellus a velit libero. Aliquam consectetur arcu vitae massa pellentesque accumsan.</p>' });
With DOM object inserted into the body of the notice:
$.fn.kiNotice({
autoOpen: true,
content: $('#important-message') }); With AJAX content loaded: $('#content').kiNotice({
autoOpen: true,
hideOnClose: true,
ajaxSettings: {
url: 'ajax.php?page=get_message&response=html',
type: 'GET'
} });
You can also use extra classes to customize the notice, and a custom notice animation (see sample code below):
$.fn.kiNotice({
autoOpen: false,
ajaxSettings: {
url: 'ajax.php?action=inbox&response=json',
type: 'GET',
success: function(data){
this._setToggleIcon('<sup>'+data.notice_count+'</sup>');
this.kiNoticeContent.html(data.notice_content);
this._open();
}
},
extraClasses: 'AlmaTheme',
extraNoticeInterval: 1000 });
This plugin has been successfully tested on the following browsers:
- IE6, IE7, IE8, IE9
- Firefox
- Chrome
- Opera
- Safari
Moreover, it works on jQuery 1.3.1 but it is highly recommended to be ran on versions 1.4 and above. Hope you guys find this plugin very useful in your site!
0
469
