Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
38 lines (29 sloc) 1.44 KB
author comments date layout slug title desc wordpress_id categories tags
jokecamp
true
2012-07-17 18:30:45 +0000
post
a-clean-javascript-ui-notification-system-with-jquery
A Clean Javascript UI Notification System with jQuery
A very primitive and simple javascript alert/notification project
324
Code
javascript
UI

Javascript UI notifications

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:

  1. Success (Green)
  2. Error (Red)
  3. 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.