Creating Nice Notifications with jQuery

Notifications are one of the most used features when developing a dynamic website. Whether your application is injecting a snippet of HTML in the web page or it’s sending the data of a form filled by a user, your application needs to give some feedback to the users. There are a lot of different techniques you can employ to provide feedback to your users such as alert messages and dialog boxes.

In this article, I’ll explain how you can integrate nice notifications in your web pages through the use of a jQuery plugin called noty.

What’s noty?

noty is a jQuery plugin that makes it easy to create several types of feedback like alerts, success or failure messages, and requests of confirmation. My choice to discuss this plugin is not random. In fact, noty is one of the most watched and starred plugins that you can find on the jQuery plugin registry. One of the best features of noty is that it’s highly customizable thanks to the many options it exposes, some of which will be discussed in this article. Another interesting feature is that it allows you to queue the notifications so that you don’t have to wait until the life cycle of a previously showed notification ends. However, if you don’t need this feature you can disable it.

Getting Started with noty

Just like many jQuery plugins, it’s very easy to start using noty. The first step is to download the plugin and include it in your pages after the jQuery library. To download noty you can either visit its GitHub repository and download the latest version available, or type the following Bower command:

bower install noty

Once you have downloaded the plugin, you can include it on your page using the following code:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="path/to/noty/jquery.noty.packaged.min.js"></script>

You’re now ready to create notifications with noty. A minimal example that employs this plugin is shown below:

<script>
   noty({ text: 'My first notification using noty'});
</script>

The statement above will cause the creation of a new notification. The result is shown in the demo below, also available as a JSfiddle:

Options

noty provides many options to configure a single notification, including a default property to change the default values of these options. Using the default object you can set values that the notifications of your pages share, so that you don’t have to write them over and over again. The plugin also offers various hooks to execute callbacks after a given action is performed. For example, you can run a specific function after a notification is showed or closed. In this section I’m not going to discuss all the options, but I’ll mention what I think are the most important ones.

The first option I want to mention is type, which defines the type of the notification displayed. Its default value is "alert" but you can also set "success", "error", "warning", "information", and "confirm".

The second property I want to introduce is maxVisible. By default the plugin shows up to five notifications but you can change this value as needed.

While we’re talking about multiple notifications, sometimes you may need to force a newer notification to replace one or more older ones while they are still visible. In such situations you can set the killer property, whose default value is true, to false.

Another option worth mentioning is layout that sets the position of the notification.

The last option I want to highlight is closeWith. It specifies how a notification can be closed and accepts an array of values. By default, a notification is closed with a click of the mouse, but you can use other values like "button" and "hover".

In addition to the properties described, the plugin has lots of other options to customise the animation, speed, buttons, and much more.

Putting it all Together

The previous section described some of the options available in noty. Here, we’ll put them into action to see what happens. For the sake of the example we’ll create a notification that:

• has “Happy!” as its text
• must be displayed in the center of the page
• can be closed with a click on the notification but also hovering over it
• must be a successful notification

In addition, we also want every new notification to force the others to be closed. The code to achieve this goal is shown below:

$.noty.defaults.killer = true;

noty({
   text: 'Happy!',
   layout: 'center',
   closeWith: ['click', 'hover'],
   type: 'success'
});

A live demo of this code is shown below but also available as a JSfiddle.

Conclusion

In this article we’ve discussed noty, a highly customizable jQuery plugin that enables us to easily create notifications. I hope you liked it and find it useful.

Have you ever heard of this plugin? If so, have you ever used it in one of your projects? Share your experience with us!