Doing great things...
Looking issues...
Feeding the unicorns...
Creating some notifications...
Applying css...
Clearing the queue...
Fixing responsive issues...
Painting office walls...
Coffee break...
Feeding cats...
Health check...
Fixing typos...

jquery notification plugin

a Startup by creators of NOTY - Publish your projects, get meaningful endorsements & more... - Publish your projects, get meaningful endorsements & more...
Built for developers, designers and digital agencies.


NOTY is a jQuery plugin 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)

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



Slack like emoji picker

developed by creators of noty


NOTY has 11 layouts and also you can create custom layouts.


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

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

Include noty/packaged/jquery.noty.packaged.min.js and its dependancies below jQuery.

NOTY is compatible with jQuery 1.6+ for now. But if you are using older version then 1.6 you can add promise.js to your header. (Thanks for Maksim Pecherskiy)

Your code should then be similar to this:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>

Install via Bower

bower install noty

Install via NPM

npm install noty


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

Returns a NOTY javascript object. (not jquery dom object, but you can access dom with this object) Also, you can give any html to "text" option

var n = noty({text: 'noty - a jquery notification library!'});


Using with jQuery animate properties;

About Easing
The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

easing and speed has no effect when animate.css is being used.

var n = noty({
    text: 'NOTY - a jquery notification library!',
    animation: {
        open: {height: 'toggle'}, // jQuery animate function property object
        close: {height: 'toggle'}, // jQuery animate function property object
        easing: 'swing', // easing
        speed: 500 // opening & closing animation speed

Using with Animate.css; Recommended

About Animate.css
Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

easing and speed has no effect when animate.css is being used.

var n = noty({
    text: 'NOTY - a jquery notification library!',
    animation: {
        open: 'animated bounceInLeft', // Animate.css class names
        close: 'animated bounceOutLeft', // Animate.css class names
        easing: 'swing', // unavailable - no need
        speed: 500 // unavailable - no need


Available options listed below.

$.noty.defaults = {
    layout: 'top',
    theme: 'defaultTheme', // or 'relax'
    type: 'alert',
    text: '', // can be html or string
    dismissQueue: true, // If you want to use queue feature set this true
    template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
    animation: {
        open: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceInLeft'
        close: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceOutLeft'
        easing: 'swing',
        speed: 500 // opening & closing animation speed
    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,
    maxVisible: 5, // you can set max visible notification for dismissQueue true option,
    killer: false, // for close all notifications before show
    closeWith: ['click'], // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications
    callback: {
        onShow: function() {},
        afterShow: function() {},
        onClose: function() {},
        afterClose: function() {},
        onCloseClick: function() {},
    buttons: false // an array of buttons


Just like this;

var n = $('.custom_container').noty({text: 'NOTY - a jquery notification library!'});


NOTY is easily themable using Javascript or CSS.

Theme structre is in noty/themes/default.js file. You can copy-paste this file and change.

Don't forget to include your theme's javascript file.

<script type="text/javascript" src="js/noty/themes/your_new_theme.js"></script>

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

var n = noty({
    text: 'NOTY - a jquery notification library!',
    theme: 'your_new_theme',


We can set button objects with an array like above;

	text: 'Do you want to continue?',
	buttons: [
		{addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {

				// this = button element
				// $noty = $noty element

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


NOTY have 5 callback option for now.

onShow - afterShow - onClose - afterClose - afterCloseClick


$.noty.get(id) - Returns a NOTY javascript object

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

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

$.noty.closeAll() - Close all notifications

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

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