Notification center for jQuery!

Trying to implement a simple notification center like Facebook or like Apple in the last version of it's OS.

Download   GitHub

Triggers

It's really easy to show the center. The plugin create a panel on the right side of your website.

Notifications

How to throw a notification with Javascript.


LESS

How easy it is to customize your notification center?

Simply use our LESS files, I try to comment it correctly so normally it's easy :)

If not or if your find a mistake just shoot a comment on github

FAYE & node.js

Why not adding a little bit of push in it?

Faye is a publish-subscribe messaging system based on the Bayeux protocol. It provides message servers for Node.js and Ruby, and clients for use on the server and in all major web browsers.


Tips

Want to display the date for each notification?

Include Moment.js and Livestamp.js and ENJOY :)

Documentation

How to start

<body>
	<div id="noticationcentermain" class="notificationcentercontainer">
		[...]all your html[...]
	</div>
</body>

Definition

<script>
$('body').notificationcenter({
            centerElement: "#notificationcenterpanel",
            bodyElement: "#noticationcentermain",
            toggleButton: "#notificationcentericon",
            addPanel : true,
            displayTime:5000,
            types:[],
            counter:true,
            default_notifs:[],
            faye:false,
            alert_hidden:true,
            alert_hidden_sound:true
        });
</script>
Name type default description
centerElement string "#notificationcenterpanel" Define the id of the element embedding your dom.
bodyElement string "#noticationcentermain" Closes the modal when escape key is pressed
toggleButton string "#notificationcentericon" Id of the button to toggle the panel.
addPanel boolean true If you want the panel on the right.
displayTime int 5000 Display time for each notification.
types array [] Array of objects to define the types of each notifications.
$('body').notificationcenter({
	types:[
{
	type:'gift', // define the type
	img:'img/gift.png', // icon path
	bgcolor:'#EB5D49', // background color for the center header
	color:'#FFFFFF' // text color for the center header
},
[...]
	]
});
counter boolean true Display a counter.
default_notifs array [] Array of objects to define the default notifications.
$('body').notificationcenter({
	default_notifs:[
{
	type:'gift', // define the type
	values:[{text:'This is an example', time:date.getTime()/1000}]
},
[...]
	]
});
faye object false Object to define the faye connection.
$('body').notificationcenter({
	faye:
{
	server:'http://yourserver:port'
	chanel:'your chanel'
}});
alert_hidden bool true If you want to be alerted even if the page has not the focus.
alert_hidden_sound string '' Url of the audio file without the extension You must provide the file in both format MP3/OGG

Methods

.notificationcenter('slide')

$('body').notificationcenter('slide');

.notificationcenter('newAlert', text, type)

$('body').notificationcenter('newAlert', 'Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.', 'gift');