Notification center for jQuery

Aug 17, 2014 in Tooltip 4846 views

Download

Overview
Documents

User Rating: 3.4/5 ( 1 votes)

Your Rating:

Notification center is a jquery plugin that implements a simple notification center like like Apple OS X.

FEATURES

Document title modification to show alert count
Display only a certain amount of notifs at once
Sound notification if the user is on an other tab/page
Per type Sounds/Colors/alert timeout and notif count displayed
Pop up alerts that are not retained in the notif pane
Click overlay when the pane is open so any click closes the pane
Notif callbacks, including a redisplay notification option
Export callback so you can save the list of current notifs
Mobile compat, includes options for swipe delete on notifs
Mobile on notifications stay in viewport even with pinch zoom
CSS Styled allows lots of styling control to the site
Allow ajax and/or faye alerts on top of js calls to create alerts
Allow Sticky notifications, sticky notifications also have an optional settable action button

Source: thesin-.github.io

1. INCLUDE CSS AND JS FILES

<link href="css/notifcenter.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.notificationcenter.js"></script>

Want to display the date for each notification?

Include Moment.js and Livestamp.js and ENJOY :)
Want mobile support with swipe delete? Try it on a mobile device, swipe left on a notif in the notification panel to delete it.

Include jquery.mobile.js and ENJOY :) (jquery.mobile.css not required)

2. HTML

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

3. JAVASCRIPT

$('body').notificationcenter({
	center_element: "#notificationcenterpanel",
	body_element: "#noticationcentermain",
	toggle_button: "#notificationcentericon",
	add_panel: true,
	notification_offset: 0,
	display_time: 5000,
	types: [],
	type_max_display: 5,
	truncate_message: 0,
	header_output: '{icon} {type} {count}',
	counter: true,
	default_notifs: [],
	faye: false,
	ajax: false,
	ajax_checkTime: 5000,
	alert_hidden: true,
	alert_hidden_sound: "sounds/Funk",
	store_callback: false
});

4. OPTIONS

Name	type	default	description
center_element	string	"#notificationcenterpanel"	Define the id of the element embedding your dom.
body_element	string	"#noticationcentermain"	Closes the modal when escape key is pressed
toggle_button	string	"#notificationcentericon"	Id of the button to toggle the panel.
add_panel	boolean	true	If you want the panel on the right.
notification_offset	int	0	If you want the notifications to start a little lower. Useful to not cover up the notificationcentericon.
display_time	int	5000	Display time for each notification in milliseconds. 0 means the notification is sticky and will not be added to the notif pane
types	array	[]	Array of objects to define the types of each notifications.
type_max_display	int	5	The amount of notifications per type to display in the panel, the rest will get queued as some are removed others will show. 0 = no limit
counter	boolean	true	Display a counter.
truncate_message	int	0	Display only one x characters of the notification/notif. callback will always have the full message
header_output	string	"{icon} {type} {count}"	Template for the notif headers
default_notifs	array	[]	Array of objects to define the default notifications. callback is optional, text can be a string or an object like the example.
faye	object	false	Object to define the faye connection.
ajax	object	false	jQuery ajax Object to define the ajax call.
ajax_checkTime	int	5000	Time between ajax calls in milliseconds.
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
store_callback	function	false	Function to call to store the panel's contents, false = no storage. An object that holds the current panel info will be passed in as an arg. Check your console.

5. METHODS

$.notificationcenter.slide()

$.notificationcenter.slide();

$.notificationcenter.newAlert(text, [type], [display notification], [callback], [time], [new])

$.notificationcenter.newAlert('This is a new alert.', 'gift', true, function(notif) { $.notificationcenter.alert(notif.text, notif.type); }, 1406857387, true);

$.notificationcenter.faye(faye_object)

var faye = {
	server: 'http://yourserver:port',
	channel: 'your channel'
};

$.notificationcenter.faye(faye);

$.notificationcenter.ajax(options_object, checkTime)

var ajax_options = {
	type: 'POST',
	url: 'some.php',
	data: {
		userid: 99
	}
};

$.notificationcenter.ajax(ajax_options, 5000);

$.notificationcenter.alert(text, [type], [callback], [action])

This is very useful for callbacks, you could setup a callback type even. action defaults to banner, anything else gives you a action button on your callback and sets the notificaiton to sticky aka no timeout.

$.notificationcenter.alert('This is just an alert, nothing in notificaiton center', 'system', function(notif) { $.notificationcenter.alert(notif.text, notif.type); });

$.notificationcenter.captureTitle([title])

Set a page title. title is optional, it'll use the current title otherwise

$.notificationcenter.captureTitle('This is the new page title');

Use the current page title. It will attempt to detect and remove any current notification counts

$.notificationcenter.captureTitle();

JS Tutorial

Notification center for jQuery

FEATURES

Related Articles