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)
June 15, 2013
Created the plugin base code, added css style, created images.
June 16, 2013
Updated the css file, added close button
June 16, 2013
Created this page, wrote "how to build it" article.
June 16, 2013
Added $.jqGrowl.clear() method that clears out the message queue.
Please feel welcome to send me an email at email@example.com if you want toadd your own edits to this plugin or submit suggestions.
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.
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):
<link rel = 'stylesheet' type = 'text/css' href = 'jq-growl.css' />
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:
// Initialize the plugin and define queue location on the screen
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.',
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.
jQuery Gems (80 gems) Discover jQuery one bit of knowledge at a time. Each page contains 1 "gem" of information in tutorial-like format.
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.