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!

Frequently Asked Questions (FAQs) about Creating Notifications with jQuery

How can I customize the appearance of my notifications using jQuery?

Customizing the appearance of your notifications using jQuery is quite straightforward. You can use CSS to style your notifications. For instance, you can change the background color, font size, font color, and more. You can also use jQuery’s .css() method to apply these styles. However, remember that any style applied using .css() will override any existing styles in your CSS file.

Can I use jQuery to create notifications that automatically disappear after a certain time?

Yes, you can. jQuery provides a method called .delay() that you can use to specify a delay before the next action is executed. You can use this method in combination with .fadeOut() to make your notification disappear after a certain time.

How can I create a notification that stays on the screen until the user dismisses it?

To create a notification that stays on the screen until the user dismisses it, you can use jQuery’s .click() method. This method allows you to specify a function to be executed when the user clicks on an element. In this case, you can use it to remove the notification when the user clicks on it.

Can I use jQuery to create notifications with different levels of importance?

Yes, you can. You can create different classes in your CSS file for different levels of importance. For instance, you can have a “warning” class for important notifications and an “info” class for less important ones. Then, you can use jQuery’s .addClass() method to add the appropriate class to each notification.

How can I use jQuery to create notifications that slide in from the side of the screen?

jQuery provides several methods that you can use to create animations, including .slideDown(), .slideUp(), and .slideToggle(). You can use these methods to create a sliding effect for your notifications.

Can I use jQuery to create notifications that play a sound when they appear?

Yes, you can. You can use the HTML5 audio API to play a sound. You can then use jQuery’s .ready() method to play the sound when the notification is ready to be displayed.

How can I use jQuery to create notifications that appear in a specific position on the screen?

You can use jQuery’s .offset() method to specify the position of your notifications. This method allows you to set the top and left coordinates of an element.

Can I use jQuery to create notifications that appear one after the other?

Yes, you can. You can use jQuery’s .queue() method to create a queue of functions to be executed. You can use this method to display your notifications one after the other.

How can I use jQuery to create notifications that fade in and out?

jQuery provides several methods that you can use to create animations, including .fadeIn(), .fadeOut(), and .fadeToggle(). You can use these methods to create a fading effect for your notifications.

Can I use jQuery to create notifications that shake or bounce?

Yes, you can. jQuery UI, an extension of jQuery, provides several additional methods for creating animations, including .effect(). You can use this method to create a shaking or bouncing effect for your notifications.