First things first, a special thanks.

notyfy is a fork of the wonderful noty jQuery plugin by Needim Arabacı. Special thanks to him for the original repo. See below for details on whats different from the original plugin.

Hi!

notyfy is a fork of the original noty jQuery plugin by Needim Arabacı, that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. (Optional). notyfy adds the ability to style notyfy via CSS, as well removing the need for JS-based layouts and implementing event-type callbacks.

The notifications can be positioned at the;
top - topLeft - topCenter - topRight - center - centerLeft - centerRight - bottom - bottomLeft - bottomCenter - bottomRight

There are lots of other options in the API to customise the text, animation, speed, buttons and much more.

It also has various events for the buttons, opening closing the notifications and queue control.

Layouts & Demos

 
Top Alert Success Error
Warning Information Confirm
 
TopLeft Alert Success Error
Warning Information Confirm
TopCenter Alert Success Error
Warning Information Confirm
TopRight Alert Success Error
Warning Information Confirm
CenterLeft Alert Success Error
Warning Information Confirm
Center Alert Success Error
Warning Information Confirm
CenterRight Alert Success Error
Warning Information Confirm
BottomLeft Alert Success Error
Warning Information Confirm
BottomCenter Alert Success Error
Warning Information Confirm
BottomRight Alert Success Error
Warning Information Confirm
 
Bottom Alert Success Error
Warning Information Confirm
 

Installation

Include jQuery latest release in your header. The Google AJAX Libraries API can be used for this but you could also host the library yourself.

Download notyfy from the Github and upload the files to your server.

Include jquery.notyfy.js and its dependancies below jQuery.
Also add themes/default.css to your header. Or some other theme.

notyfy is compatible with jQuery 1.5+ for now.

Your code should then be similar to this:

						
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="jquery.notyfy.js"></script>
<script type="text/javascript" src="jquery.notyfy.css"></script>

<!-- include a theme -->
<script type="text/javascript" src="themes/default.css"></script>
            
						

Creating a notyfy

We wrote a helper for creating notyfy easily. So you can use notyfy(properties); Just like this;

Returns a notyfy javascript object. (not jquery dom object, but you can access dom with this object)

							
var notyfy = notyfy({text: 'notyfy - Yet another jQuery notification plugin'});
              
							

Options & Defaults

Available options listed below.

						
$.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
};
						
						

Custom Container

Just like this;

						
var notyfy = $('.custom_container').notyfy({text: 'notyfy - a jquery notification library!'});
						
						
Try!
Alert Success Error
Warning Information Confirm
Custom Container

Theme (But How?)

notyfyCSS is easily themable using CSS. See the themes/default.css theme for details

After that you can set your new theme with notyfy theme property. Like;

						
	var notyfy_id = notyfy({
		text: 'notyfy - a jquery notification library!',
		theme: 'your_new_theme',
	});
						
						

Buttons

We can set button objects with an array like above;

						
notyfy({
	text: 'Do you want to continue?', 
	buttons: [{
		addClass: 'btn btn-primary',
		text: 'Ok',
		onClick: function($notyfy) {
				// this = button element
				// $notyfy = $notyfy element

				$notyfy.close();
				notyfy({text: 'You clicked "Ok" button', type: 'success'});
		}
	}, {
		addClass: 'btn btn-danger',
		text: 'Cancel',
		onClick: function($notyfy) {
			$notyfy.close();
			notyfy({text: 'You clicked "Cancel" button', type: 'error'});
		}
	}]
});
						
						

Callbacks

notyfyCSS has 4 events that you can bind() too!

show - hide - shown - hidden

API

$.notyfy.get(id) - Returns a notyfy javascript object

$.notyfy.close(id) - Close a notyfy - same as var n = notyfy({text: 'Hi!'})); n.close();

$.notyfy.clearQueue() - Clears the notification queue

$.notyfy.closeAll() - Close all notifications

$.notyfy.setText(id, text) - Notification text updater - same as var n = notyfy({text: 'Hi!'})); n.setText('Hi again!');

$.notyfy.setType(id, type) - Notification type updater - same as var n = notyfy({text: 'Hi!'})); n.setType('error');

Github Commit History

Committer Message Date
Craig Michael ThompsonMerge pull request #3 from rosenfeld/fix-mem-leak Fix some memory leaks in NotyfyObject.close()2013-04-18T13:49:08Z
Rodrigo Rosenfeld RosasFix another leak caused by a window.resize event2013-04-16T20:50:25Z
Rodrigo Rosenfeld RosasFix some memory leaks in NotyfyObject.close()2013-04-16T20:16:11Z
Craig Michael ThompsonMerge pull request #2 from rosenfeld/master Add support for IE72012-12-13T08:19:18Z
Rodrigo Rosenfeld RosasAdd support for IE7 IE7 doesn't support the final comma in hash and array declarations as in: var hash = { some_key: 'some value', another_key: 'another value', }2012-12-07T17:00:54Z
Craig Michael ThompsonUpdate README.markdown2012-11-06T13:24:14Z
Craig Michael ThompsonNamespace change to notyfy2012-11-05T20:45:24Z
Craig Michael ThompsonREADme fixes2012-11-05T20:35:16Z
Craig Michael Thompsontest hook2012-11-05T19:38:15Z
Craig Michael ThompsonFix broken files2012-11-05T19:32:12Z
Craig Michael ThompsonSmall change to test hooks2012-11-05T19:02:53Z
Craig Michael ThompsonRe-arrange files2012-11-05T18:57:51Z
Craig Michael ThompsonChange to notyfy2012-11-05T18:54:12Z
Craig Michael ThompsonRemove hi...2012-11-05T18:23:13Z
Craig Michael ThompsonUpdate README and rename to notyCSS2012-11-05T18:22:47Z
Craig Michael ThompsonRemove redundant js directory2012-11-05T18:15:53Z
Craig Michael ThompsonFix events2012-11-05T18:08:25Z
Craig Michael ThompsonFurther cleanups. Use common modal element instead of re-creating each time. Remove callbacks in favour of jQuery events (notyhide, notyhidden, notyshow, notyshown) that bubble.2012-11-05T18:04:24Z
Craig Michael ThompsonAdd missing stylesheet. Fix up layout changes. Fix buttons and use delete to prevoke alert consumtion2012-11-05T17:21:13Z
Craig Michael ThompsonRemove the need for JS layoyts in favour of CSS (again)2012-11-04T20:56:00Z
Craig Michael ThompsonFix demo urls2012-11-04T16:55:28Z
Craig Michael ThompsonRemove redundant noty directory from css/js directories2012-11-01T20:59:33Z
Craig Michael ThompsonRemove redundant promise stuff2012-11-01T20:50:00Z
Craig Michael ThompsonUpdate README2012-11-01T20:48:49Z
Craig Michael ThompsonSet modal back to false by default, and use the old height toggle animation for open/close.2012-11-01T20:46:14Z
Craig Michael ThompsonRemove need for promise.js2012-11-01T20:36:23Z
Craig Michael ThompsonRemove console.log2012-11-01T20:31:04Z
Craig Michael ThompsonRemove JS themes in favour of regular old CSS. Adds new classes to the various elements for theming. Also remove animation option in favour of showEffect and hideEffect (callbacks)2012-11-01T20:26:11Z
Nedim ArabacıMerge pull request #95 from gsaricali/master Fixed a defect in close method of noty2012-10-05T12:06:15Z
Nedim ArabacıMerge pull request #97 from Mikhail-Fiadosenka/master Fix for incorrect positioning2012-10-05T12:05:15Z