jqGrowl -- Growl notification messages in HTML

Growl notification messages: a jQuery plugin.

The Mac OSX notification message plugin. (Also known as the jq-growl plugin, developed by me on Junt 16th, 2013.)

This is the beta version of jqGrowl plugin that was described in one of the articles I have written.

Mac OSX is able to display Growl message notifications. They can be customized to appear in any of the four screen corners. Many applications send Growl messages to the operating system to let user know about an action that has just occurred.

But what about HTML? Can we create Growl-like messages on our web page? This is what jqGrowl plugin does. Click on this button to see how it works:

(keep clicking on this button to add more messages)

 
Developer's log
June 15, 2013Created the plugin base code, added css style, created images.
June 16, 2013Updated the css file, added close button
June 16, 2013Created this page, wrote "how to build it" article.
June 16, 2013Added $.jqGrowl.clear() method that clears out the message queue.

Please feel welcome to send me an email at greg.sidelnikov@gmail.com if you want toadd your own edits to this plugin or submit suggestions.

About jqGrowl

Notification messages get built up on top of one another when more than one event occurs in a short period of time. They also fade out by default unless the user hovers the mouse over the message. Using jQuery, this can be simulated by adding/removing HTML tags to/from the message hierarchy dynamically.

Growl messages have a header, body, an icon and a visually non-intrusive close button. It only appears when the mouse pointer is hovering over the message. These elements along with an outset shadow around the message and transparency can be created using cascading style sheets.


Thank You.

How to install jqGrowl on your website

Download and include plugin resource files shown below to your web page. Place the image files into the plugin directory together with the CSS file.

To add the plugin to your page (you will also need jQuery added to your project):

<head> <script src = 'jquery.js' type = 'text/javascript'></script> <script src = 'jq-growl.js' type = 'text/javascript'></script> <link rel = 'stylesheet' type = 'text/css' href = 'jq-growl.css' /> </head>

How to add jqGrowl messagess to the queue

Once the files above are added you are ready to start using it. First you need to initialize it. This is usually done on the document/ready event once all DOM elements have finished downloading:

<script type = "text/javascript">$(document).ready(function() { // Initialize the plugin and define queue location on the screen $.jqGrowl.init( { position: 'absolute', bottom: '8px', right: '8px' }, 5000); }); </script>

The plugin is now initialized, let's use the msg method to add a message to the queue.

$.jqGrowl.msg('This message was generated using jqGrowl, a jQuery plugin. This message can be customized to appear in any of the four screen corners.', 'Notification Message');

Note: This plugin is still in beta, and may not work correctly in some browsers (probably older versions of IE). If you notice something please let me know, and I'll update the code.

Recommended jQuery tutorial books:

Do you want to learn how to build your own jQuery plugins? These books have the info to help you get started. These are my tutorial e-books with an interractive table of contents which make it easy to find the subject of interest. It is packed with detailed explanations & diagrams.

understanding jquery pdf tutorial book

Understanding jQuery (196 pages) An easy to understand guide with thorough, yet simple explanations and visual diagrams -- It's designed to widen your knowledge of jQuery - the cross-browser framework that simplifies JavaScript programming.

Although it does cover advanced subjects such as function closures (not seen in any tutorial on LearnjQuery.org in neither JavaScript nor jQuery category) the beginner programmer will get the most out of it.

jquery gems tutorial book

jQuery Gems (80 gems) Discover jQuery one bit of knowledge at a time. Each page contains 1 "gem" of information in tutorial-like format.

Thought you might be interested in this...
Get 2 and save $10

I do not publish my books with any major publishing companies. People get my books because they like my tutorials. I like to write tutorials and my books help me to continue doing that. Your support is much appreciated.

2013 Copyright. LearnjQuery.org Tutorials