jQuery Growl

jQuery Growl is a Growl like notification plugin for jQuery (tested with version 1.2.3).

You can view a demo of it here:

http://projects.zoulcreations.com/jquery/growl/

Or download the uncompressed source here: NOTE: as this project is still fairly young, it is best to obtain a copy of the latest source from the demo page.

http://projects.zoulcreations.com/jquery/growl/jquery.growl.js

jQuery Growl is easily 'skinned' (themed, templated, whatever you want to call it) by using the following code syntax:

$.growl.settings.displayTimeout = 4000;
$.growl.settings.noticeTemplate = ''
+ '<div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalTop.png); position: relative; width: 259px; height: 16px; margin: 0pt;"></div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalBackground.png); position: relative; display: block; color: #ffffff; font-family: Arial; font-size: 12px; line-height: 14px; width: 259px; margin: 0pt;">'
+ ' <img style="margin: 14px; margin-top: 0px; float: left;" src="%image%" />'
+ ' <h3 style="margin: 0pt; margin-left: 77px; padding-bottom: 10px; font-size: 13px;">%title%</h3>'
+ ' <p style="margin: 0pt 14px; margin-left: 77px; font-size: 12px;">%message%</p>'
+ '</div>'
+ '<div style="float: right; background-image: url(my.growlTheme/normalBottom.png); position: relative; width: 259px; height: 16px; margin-bottom: 10px;"></div>'
+ '</div>';
$.growl.settings.noticeCss = {
position: 'relative'
};

UPDATE: (Added in '1.0.0-b2')
or by simply using $.growl.settings.noticeElemet(el), where 'el' can either be a DOM Element or a jQuery Object -- the contents (.html()) of 'el' are used ... not the container. This allows you to place the 'template' in a hidden div ("display: none") without requiring $.growl to 'unhide' it ...