Notyfy Notifications plugin

Top notifications

Alert Success Danger Warning Information Confirm

Left

Top Center Bottom

Center

Center notification

Right

Top Center Bottom

Creating a notyfy

var notyfy = notyfy(
{
	text: 'notyfy - Yet another jQuery notification plugin',
	type: 'primary' // alert|error|success|information|warning|primary|confirm
});

Default Options

$.notyfy.defaults = {
	layout: 'top',
	theme: 'default',
	type: 'alert',
	text: '',
	dismissQueue: true, // If you want to use queue feature set this true
	template: '<div class="notyfy_message"><span class="notyfy_text"></span>' + 
  		  '<div class="notyfy_close"></div></div>',
	showEffect:  function(bar) { bar.animate({ height: 'toggle' }, 500, 'swing'); },
	hideEffect:  function(bar) { bar.animate({ height: 'toggle' }, 500, 'swing'); },
	timeout: false, // delay for closing event. Set false for sticky notifications
	force: false, // adds notification to the beginning of queue when set to true
	modal: false,
	closeWith: ['click'], // ['click', 'button', 'hover']
	events: {
		show: null,
		hide: null,
		shown: null,
		hidden: null
	},
	buttons: false // an array of buttons
};

Gritter Notifications plugin

Color options

Light Dark Primary

Other examples

Add sticky notification Has to be manually removed Add notification without image Add white notification Has a "gritter-light" class applied Add notification with max. of 3 Only if there are less than 4 messages already on screen

Creating a Regular Gritter

$.gritter.add({
	// (string | mandatory) the heading of the notification
	title: 'This is a regular notice!',
	// (string | mandatory) the text inside the notification
	text: 'This will fade out after a certain amount of time.',
	// (string | optional) the image to display on the left
	image: 'http://yourimage.url/image.png',
	// (bool | optional) if you want it to fade out on its own or just sit there
	sticky: false,
	// (int | optional) the time you want it to be alive for before fading out
	time: ''
});

Creating a Primary Gritter

$.gritter.add({
	title: 'This is a primary notice!',
	text: ' Lorem ipsum ...',
	image: 'your image URL goes here'
	class_name: 'gritter-primary'
});
× close

Themer color options