Category Archives: Jquery

I recently found a useful jQuery plugin for adding unobtrusive web browser messages for webapps calledjGrowl.

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.

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.