jQuery alert notifications on web page

Posted in Tutorials

In this tutorial, we will use jQuery plugin called “Noty” to display a notification on our web page whenever someone types into an input box.  Like this.

We start with basic HTML that looks like this …

Note that in the head we include first the jQuery library and then the noty script jquery.noty.package.min.js which can be found when you download Noty.

We then have an input textbox with id=”datainput”.  The placeholder attribute prompts the user to type something.

At the  bottom of the file, upon keypress we invoke the noty notification that says “Thanks for typing something” …

Let’s test this out in the browser…

Oops.   If we typed three characters, three notifications shows up.

In the Noty options, we can use the maxVisible to limit this to one.  But the alerts are still queued.  A better way is to invoke notification only upon user exit of textbox like this (using blur) …

And this time we set type to “information” and this is what it looks like …

By default, the user can clear the notification by clicking on it.  To dismiss notification upon click or hover, we can do …

We set layout to “center” to have the notification display in the center of the browser.  We also set the type to “success” to see that green style notification that looks like this…

You can try it out here.

---