← Back to ned.im
Termic - an idea for personal pages and terminal lovers ♥ →

Hi!

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

The API provides lots of other options to customise the text, animation, speed, buttons and much more.

It also has various callbacks for the buttons such as opening and 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 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="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>
            
						

Creating a noty

We wrote a helper for creating noty easily. So you can use noty(properties); Just 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!'});
              
							

Options & Defaults

Available options listed below.

						
$.noty.defaults = {
    layout: 'top',
    theme: 'defaultTheme',
    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'},
        close: {height: 'toggle'},
        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']
    callback: {
        onShow: function() {},
        afterShow: function() {},
        onClose: function() {},
        afterClose: function() {}
    },
    buttons: false // an array of buttons
};
            
						

Custom Container

Just like this; (Dependency: layouts/inline.js)

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

Theme

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.

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',
  });
            
						

Buttons

We can set button objects with an array like above;

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

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

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

Callbacks

noty have 4 callback option for now. We will add more callback asap.

onShow - afterShow - onClose - afterClose

API

$.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');

Github Commit History

Committer Message Date
Nedim Arabacıbitdeli badge2 months ago
Nedim ArabacıFixes #181 usign modal option with custom css theme2 months ago
Nedim ArabacıMerge pull request #176 from needim/develop Pull request guide3 months ago
Nedim Arabacıpull request guide added3 months ago
Nedim Arabacıpull request guide added3 months ago
Nedim Arabacıpackaged.min file path fix for demo pages3 months ago
Nedim ArabacıMerge pull request #175 from blittle/master Check for undefined to resolve #1733 months ago
Bret LittleCheck for undefined to resolve #1733 months ago
Nedim ArabacıMerge pull request #171 from needim/develop donate buttons added3 months ago
Nedim Arabacıdonate buttons added3 months ago
Nedim ArabacıMerge pull request #170 from needim/develop oops final touch for v2.2.03 months ago
Nedim Arabacıoops final touch for v2.2.03 months ago
Nedim ArabacıMerge pull request #169 from needim/develop v2.2.0 version update in header3 months ago
Nedim Arabacıv2.2.0 version update in header3 months ago
Nedim ArabacıMerge pull request #168 from needim/develop v2.2.03 months ago
Nedim Arabacıreadme img update3 months ago
Nedim Arabacıreadme update3 months ago
Nedim ArabacıI added another grunt task for concat. Related #1663 months ago
Nedim ArabacıInrepo demo pages updated with noty.packaged.min.js4 months ago
Nedim ArabacıI added a simple grunt task for concat & minify solution. Related #1664 months ago
Nedim Arabacıv.2.2.0 - back-to-the-css for themes Related issues #54 #60 #162 noty is not forcing you to include theme.js now. If your theme-name doesn't have a equal theme.js; noty will use your theme-name as a css className. Check this demo page: demo/themeCss.html Also; there is no backward compability issue about that. Everything works fine. But I deleted BC option overriding control in noty helper function. So you must use noty with 2.0.x options. (1.0.x options support dropped now) Structure will be like this;
  • noty text/html
  • 4 months ago
    Nedim ArabacıMerge pull request #165 from needim/develop v2.1.4 killer option4 months ago
    Nedim Arabacıv2.1.4 killer option4 months ago
    Nedim Arabacıv2.1.34 months ago
    Nedim ArabacıFixes #1634 months ago
    Nedim ArabacıAdded: jQuery manifest file4 months ago
    Nedim Arabacıv2.1.14 months ago
    Nedim ArabacıFix for button attr ids4 months ago
    Nedim ArabacıMerge pull request #161 from ashes999/master Buttons have (user-specifiable) IDs5 months ago
    ashes999Buttons have (user-specifiable) IDs Added IDs to confirmation dialog. - Default ID: button-<#> - User-specifiable5 months ago