jQuery Growl

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

You can view a demo of it here:

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

Or download the uncompressed source here:

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:

[js]$.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’
};[/js]