Changing and Using the Growl Window

GuildPortal admin site link to the original post

This post will walk you through on how to add style to and use the growl popup window. The growl popup is a timed window and should only be used for notifications or other basic information. Also, because the window is timed, it should not contain too much information. Using it as a Site Notification and having it pop up on every page load could get really annoying, so I'd avoid using the site notification on your forums page (see the section below on using the growl window on how to do this).

Changing the style

---

---

There are two versions below.

1. Basic Growl Box - This is a basic style that should match all web sites.
2. Site Matching Growl Box - This box uses the same custom CSS as your content boxes (see this post for the CSS).

Add the code to your Banner Area, Footer or into the jQuery Box*

*Note* If you plan on using the jQuery Code box (Control Panel > Guild Settings > Advanced > Custom JQuery Code), add the following into the Document.Ready Event Code top box: "return;" (without the quotes), then add the code below into the Functions box. NEVER leave one of those boxes blank or you'll be welcomed to your site page with a blank page.

Basic Growl Box

<script type="text/javascript"> $(document).ready(function(){  $.growl.settings.displayTimeout = 10000;  $.growl.settings.noticeTemplate = ''   + '<table border="0" cellpadding="0" cellspacing="0" style="margin-left:auto;width:%priority%;"><tr><td style="background:url(http://'   + 'i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bdm_tl.png) no-repeat;width:27px;height:39px"><img style="float:left;position:'   + 'relative;top:3px;left:20px;width:25px;height:25px;" src="%image%"></td><td style="background:url(http://i201.photobucket.com/albums/'   + 'aa236/Mottie1/testsite/styles/bdm_tt.png) repeat-x;height:39px;"><table width="100%"><tr><td width="98%"><h1 style="font-size:18px;'   + 'margin-left:25px;position:relative;top:8px;">%title%</h1></td><td width="2%" style="vertical-align:bottom;"><a href="" onclick="return '   + 'false;" rel="close"><img style="border:0px;margin-bottom:8px;" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/'   + 'closed.gif"></a></td></tr></table></td><td width="27" height="39"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/'   + 'styles/bdm_tr.png"></td></tr><tr><td style="background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bdm_ls.png) '   + 'repeat-y;width:27px;"></td><td style="background:#525252;"><div style="width:100%;color:#ddd;margin-top:10px;">%message%</div></td>'   + '<td style="background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bdm_rs.png) repeat-y;width:27px;"></td>'   + '</tr><tr><td width="27" height="27"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bdm_bl.png"></td>'   + '<td style="background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bdm_bt.png) repeat-x;height:27px;"></td>'   + '<td width="27" height="27"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bdm_br.png"></td></tr></table>'   + '<div style="width:0px;height:5px"/>';  $.growl.settings.noticeFadeTimeout = 'fast';  $.growl.settings.noticeRemove = function(notice, callback) {   notice.animate({opacity: '0', height: '0px', width: '0px'}, {duration:jQuery.growl.settings.noticeFadeTimeout, complete: callback});  }; }) function growl2(sTitle, sMsg, sImg, sWdth) {  if (typeof sImg=="undefined"||sImg=='') sImg = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/blank.gif';  if (typeof sWdth=="undefined"||sWdth=='') sWdth = 300;  if (parseFloat($.growl.settings.dockCss.width) < sWdth) $.growl.settings.dockCss.width = sWdth;  $.growl(sTitle, sMsg, sImg, sWdth); } </script>

Site Matching Growl Box

<script type="text/javascript"> $(document).ready(function(){  $.growl.settings.displayTimeout = 10000;  $.growl.settings.noticeTemplate = ''   + '<div class="ContentBox" style="margin-left:auto;width:%priority%;"><table border="0" cellspacing="0" cellpadding="0" width="100%">'   + '<tr><td class="topleft"></td><td class="toptile"><a href="javascript:void(0)" style="text-decoration:none;" onclick="return false;"'   + ' rel="close"><div class="ContentBoxTitle">%title%</div></a></td><td class="topright"></td></tr></table><table border="0"'   + ' cellspacing="0" cellpadding="0" width="100%"><tr><td class="lefttile"></td><td class="ContentBoxBody2" style="overflow:auto">'   + '%image%%message%</td><td class="righttile"></td></tr></table><table border="0" cellspacing="0" cellpadding="0" width="100%">'   + '<tr><td class="bottomleft"></td><td class="bottomtile">&nbsp;</td><td class="bottomright"></td></tr></table></div><div'   + ' style="width:0px;height:5px"/>';  $.growl.settings.noticeFadeTimeout = 'fast';  $.growl.settings.noticeRemove = function(notice, callback) {   notice.animate({opacity: '0', height: '0px', width: '0px'}, {duration:jQuery.growl.settings.noticeFadeTimeout, complete: callback});  }; }) function growl2(sTitle, sMsg, sImg, sWdth) {  if (typeof sImg=="undefined"||sImg=='') sImg = '<img src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/blank.gif>';  if (typeof sWdth=="undefined"||sWdth=='') sWdth = 300;  if (parseFloat($.growl.settings.dockCss.width) < sWdth) $.growl.settings.dockCss.width = sWdth;  $.growl(sTitle, sMsg, sImg, sWdth); } </script>

Customizing

• You can set how long to display the growl window by modifying the number in red. The number is the time in milliseconds, so 10,000 = 10 seconds.
  
  $.growl.settings.displayTimeout = 10000;
• If you want to add your own style to the growl window, check out this page or look at the source code of this page.
• Closing the box: To add a link inside the growl window that closes itself, add this code:
  
  <a href="" onclick="return false;" rel="close">Close</a>
  
  This is already done in the code above - close the basic growl box by clicking on the red X and close the site matching growl box by clicking in the title area.

Using the Growl Window

Plain Growl Window (no styling)

If you just want to use the standard Growl function and you aren't planning on using the code above, you can add the HTML below to make it work:

<a href="javascript:growl('TITLE','Message');">Link Name</a>

• The "TITLE" (in blue) is the title/header that shows in the Growl window.
• The Message is in green and will be displayed inside the body of the Growl window, this can include HTML tags like <img>
• The link name (in purple) is what is clicked on to make the Growl window pop up. This also can include <img> (images)

Custom Growl Window (using the styling from above)

If you picked a style from above and added the code to your site, follow these instructions on how to use this version of the growl box. Use the HTML below to make this work:

<a href="javascript:growl2('TITLE','Message','IMAGE',250);">Link Name</a>

• The "TITLE" (in blue) is the title/header that shows in the Growl window.
• The Message is in green and will be displayed inside the body of the Growl window, this can include HTML tags like <img>. You can also use the method in the Site Notification section below to add a formatted block.
• To add an image in the growl box please note that the two version above use different methods:
  
  
  1. Basic Growl Box - This style adds an icon in the header. Replace the 'IMAGE' with the URL to your image:
     
     http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/info.png
     
     Here are some examples:
     
     <a href="javascript:growl2('TITLE #1','Hello this is test #1','http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/error.png',200);">Growl Test 1</a>
     
     <a href="javascript:growl2('TITLE #2','Hello this is test #2','http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/info.png',300);">Growl Test 2</a>
     
     <a href="javascript:growl2('TITLE #3','Hello this is test #3<br>This is a test<br>Hello test<br>Hello','',400);">Growl Test 3</a>
  2. Site Matching Growl Box - This style adds an icon in the message area, but on the right side. You could just include the image with the message portion as well. But to add this image type, you'll need to include the entire image tag but don't include any quotes
     
     <img style=float:left;margin:5px; width=25 src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/info.png>
     
     Here are some examples:
     
     <a href="javascript:growl2('TITLE #1','Hello this is test #1','<img style=float:right;margin:0px 5px 5px 5px; width=25 src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/error.png>',200);">Growl Test 1</a>
     
     <a href="javascript:growl2('TITLE #2','Hello this is test #2','<img style=float:left;margin:5px; width=25 src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/info.png>',300);">Growl Test 2</a>
     
     <a href="javascript:growl2('TITLE #3','Hello this is test #3','',400);">Growl Test 3</a>
• The number in red sets the width of the growl window. if you leave it blank, it set the width to a default of 300 pixels.
• The link name (in purple) is what is clicked on to make the Growl window pop up. This also can include <img> (images)

Site Notification

This method will make a growl window pop up when the site page is loaded. It's best used for important news, but don't include too much information because people will only have a few seconds to read it (10 seconds is the default above).

Each portion of the growl window has been separated out for easier reading, but it has the same basic format as the growl links above. I'd recommend only adding this to your home page in a free form text/HTML box. If you add it into the header or footer it'll become really annoying when members are trying to read the forums or mail.

<script type="text/javascript">
$(document).ready(function(){
 var GrowlTitle = '<font color="red">Guild Notice!</font>';
 var GrowlIcon = '<img style=float:right;margin:0px 5px 5px 5px; width=50 src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/error.png>';
 var GrowlMsg = $('#growlNote').html();
 var GrowlWidth = 300;
 growl2(GrowlTitle,GrowlMsg,GrowlIcon,GrowlWidth);
})
</script>
<div id="growlNote" style="display:none;">
<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/t.gif">his is a test of the Guild Messaging System. This growl window shows that you can add images and other styles into this window.<br>
<br>
Click on the title bar to close this box, or wait 10 seconds.<hr><h2>Headers</h2> and styles including <font color="green">color</font> changes, <b>bold</b> and <i>italics</i>.<br>
<div align="center"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/blizzlogo.gif"></div>
</div>

• GrowlTitle - This is the growl window title, notice that you can use font coloring to highlight the title
• GrowlIcon - This is setup for the Site Matching Growl Box, so only use the URL if you're using the Basic Growl Box
• GrowlMsg - This uses scripting to point to a <div> with the contents you want to include in the message, you could replace the "$('#growlNote').html();" with just text if you desire. Make sure the growlNote (in purple) matches the script and the ID of the div. The text in green is what will be displayed inside the growl box.
• GrowlWidth - This sets the width of your notification box

Edit (11/15/2009): Oops, I forgot to add the growl window settings inside a $(document).ready... function.