I recently found a useful jQuery plugin for adding unobtrusive web browser messages for webapps called jGrowl.
It displays a floating div with your custom message for 5-10 seconds on the top of the screen and fades out. There are options to change the duration of the message, set the message as a sticky until it is closed by the user, position options, and animation options. It is useful for showing quick informational messages such as “Saving changes”, “Update”, and “Delete”. Two unique features with this plugin are the “sticky feature” and the ability to stack consecutive messages together.
I’ve created a quick tutorial on adding this jQuery plugin to your app.
How to use the jGrowl plugin
Download the plugin at http://stanlemon.net/projects/jgrowl.html.
Inside the zip file, copy the two files “jquery.jgrowl.js” and “jquery.jgrowl.css” to your server. If you don’t have “jquery-1.4.2.js” on your server, copy that file as well.
Next, add the following lines to your webpage
<script src="jquery.js" type="text/javascript">
<link type="text/css" href="jquery.jgrowl.css" rel="stylesheet">
<script src="jquery.jgrowl.js" type="text/javascript">
To make the message appear on the page, add this to the BODY of your HTML.
<div id="jGrowl" class="top-right jGrowl"><div class="jGrowl-notification"></div></div>
<script type="text/javascript">$.jGrowl('Test!');</script>
The page should now show the “Test” message appear and fade out after a few seconds.
