A Clean Javascript UI Notification System with jQuery

17 Jul 2012

I've created a pretty simple javascript notification system for letting the users know what is going on and what is happening. UIs should be always keep the user informed to what going on. This notification system is particulaly useful for displaying the outcome of AJAX updates. The code uses the jQuery library.

I use three different types of notifications and their respective colors:

Success (Green)
Error (Red)
Information (Blue)

I have the notifications set to pop into the top right corner of the page. Show for a period of time then disapear. The notifications nicely stack on top of each other.

The methods to add the notes:

AddInformNote("Caution");
AddSuccessNote("The data was successfully saved.");
AddFailedNote("Error: The record could not be updated.");

View Online Example and Code. All the js and CSS source code can be viewed inline in the HTML file.