jGrowl

I started developing a web application that needs a sophisticated notification system. It turns out the actual notification message is the easy part since jGrowl does all the work for me.

Here's all you have to do to get jGrowl to work:

Download jGrowl.

Copy the 3 files into your web site directory:

jquery-1.2.6.js (or your newer or minimized version of jQuery)

jquery.jgrowl.js (or the minimized version)

jquery.jgrowl.css

(I put the 2 .js files in /scripts and the .css file in /styles.)

Link to the 3 files like so:

   <link href="styles/jquery.jgrowl.css" rel="Stylesheet" type="text/css" />
   <script src="scripts/jquery-1.2.6.js" type="text/javascript"></script>
   <script src="scripts/jquery.jgrowl.js" type="text/javascript"></script>

Then within any Javascript file, you should be able to call jGrowl:

   $.jGrowl("This is a jGrowl notification.");

Also, the notification text was blue for me, which didn't look to good on a black background. I fixed it by adding the following CSS to my main CSS file:

   div.jGrowl div.message
   {
       color: #fff;
   }