jquery-notification

Demos

Default

$.createNotification({ content: 'Hola mundo!' })

$.createNotification({
	horizontal: 'left',
	vertical: 'bottom',
	content: 'Hey hey Mar',
	duration: 1000
})

$.createNotification({
	content: '<img src="https://twimg0-a.akamaihd.net/profile_images/770845756/45_normal.jpg"> Hi, I\'m GG Allin'
})

$.extend($.notificationOptions, {
	fadeIn: 2000
})
$.createNotification({
	content: 'fadeIn is now set to 2000ms'
})

$.extend($.notificationOptions, {
	fadeIn: 400
})
$.createNotification({
	content: 'fadeIn is now set to 400ms'
})

$.createNotification({
	content: 'Ho ho!',
	limit: 2,
	vertical: 'bottom'
})

$.createNotification({
	content: 'ba dum ts!',
	limit: 2,
	queue: true,
	horizontal: 'left'
})

Sticky

$.createNotification({
	content: 'I\'m not leaving punk',
	duration: null
})

$.createNotification({
	content: 'I may leave, if you click on me',
	duration: null,
	click: function() {
		this.hide();
	}
})

Include script after jQuery

<script src="jquery.notification.js"></script>

Include stylesheet

<link rel="stylesheet" href="notification.css">

Copy images (using same path of stylesheet)

$.createNotification(options)

Click callback

Notification content

On screen duration in milliseconds, set it to 0 for sticky, default 5000

Fade in effect duration in milliseconds, default 400

Fade out effect duration in milliseconds, default 400

Visible limit per board, when reached notifications wont be created, default false

If queue is active and limit is reached notifications will be shown when other hides, default false

Slide up effect duration in milliseconds, default 200

Horizontal alignment, default right

Vertical alignment, default top