jFeedback: A Minimal jQuery Notification Plugin

Every web developer knows how difficult it can be to decide how to provide feedback to the user in form of an error or a success message.

When submitting forms or executing actions on web sites it is of great importance to tell the user if his interaction was successful or not. Often, this essential requirement is implemented in a very verbose way and can sometimes be burdening to the user.

Just take the example of Twitter’s notification bar which appears every time something gets saved or if we type the password wrong when logging in. Although it is a very elegant solution, one could imagine an even slimmer solution. For a success message this is very simple: the only thing a user needs to know is, if his action was successful, not what was successful. A simple green “OK” icon could do that job.

In case of an error the user might want to know what went wrong, but it is not always the case that the user needs to see the type of error, e.g. when trying to log in with a wrong password.

Since I already made the notification plugin jBar, I thought that I could create another slimmer notification solution based on it. The notification consists of a simple “OK” or “Error” icon which the user can decide to click if he is interested in the details of the notification.

You can call the plugin like this:

$(element).feedback()

And you can configure the plugin in the following way:

1. color: text color of the message
2. background_color: background color of the bar
3. position: position of the icon (bottomright, bottomleft, topright, topleft)
4. barposition: position of the bar (bottom, top)
5. removebutton: boolean to define if the closing cross in the bar should appear
6. message: the notification message
7. time: time in milliseconds for the bar/icon to disappear
8. status: type of status (error, ok)