title: Good Notification Plugin For Jquery?
body: <p>I am looking at pines notify(<a href="http://pines.sourceforge.net/pnotify/" rel="noreferrer">http://pines.sourceforge.net/pnotify/</a>) and it looks good but it seems to have little actual documentation so I am wondering is there anything more established and worked on out there?</p>
  
  <p>Like I don't want to spend time trying to figure out how to use pines and then find out it is missing some feature that I needed a few months later that I needed to change to a different plugin.</p>
  
  <p>This happened to me with tablesorter 2.0 I was using it then I needed the filtering but theirs kinda sucked so I found datatables what had such a bigger api and developed more.</p>
  
  <p>So I am wondering if there is something like datatables(in terms of development and features) just for notifications instead.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>So I am looking at jgrowl and kinda confused with how to use the theme roller with it.</p>
  
  <p>So I took once of the example files and stripped it down with everything I thought was junk.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true"&gt;
      &lt;head&gt;
          &lt;title&gt;jGrowl meet Twitter&lt;/title&gt;
          &lt;link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/&gt;
          &lt;link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="Stylesheet" /&gt;
          &lt;script type="text/javascript"&gt;
              $(function(){
                  $('.ui-state-default').hover(
                      function(){$(this).addClass('ui-state-hover');},
                      function(){$(this).removeClass('ui-state-hover');}
                  )
                  .mousedown(function(){$(this).addClass('ui-state-active');})
                  .mouseup(function(){$(this).removeClass('ui-state-active');})
                  .mouseout(function(){$(this).removeClass('ui-state-active');});
              });
          &lt;/script&gt;
  
          &lt;script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="../jquery-1.3.2.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="../jquery.jgrowl.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
              $(document).ready(function(){
                  // This value can be true, false or a function to be used as a callback when the closer is clciked
                  $.jGrowl.defaults.closer = function() {
                      console.log("Closing everything!", this);
                  };
  
                  $.jGrowl("Sticky notification with a header", 
                      { 
                          header: 'A Header', 
                          sticky: true,
                      });
              });
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="trdevtool_contain" class="ui-widget ui-widget-content ui-corner-all"&gt;
          &lt;div class="ui-widget-header ui-corner-top"&gt;
              &lt;h1&gt;jQuery UI ThemeRoller &lt;span&gt;Developer Tool&lt;/span&gt;&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I don't understand what this is for</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          $(function(){
              $('.ui-state-default').hover(
                  function(){$(this).addClass('ui-state-hover');},
                  function(){$(this).removeClass('ui-state-hover');}
              )
              .mousedown(function(){$(this).addClass('ui-state-active');})
              .mouseup(function(){$(this).removeClass('ui-state-active');})
              .mouseout(function(){$(this).removeClass('ui-state-active');});
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>It seems to have nothing to do with applying the themes. I took it away and the theme was still applied. Also if you look at my jgrow</p>
  
  <pre><code>$.jGrowl("Sticky notification with a header", 
      { 
          header: 'A Header', 
          sticky: true,
      });
  </code></pre>
  
  <p>I make no mention of theme yet it still some how used the theme. Why is it taking the theme?</p>