jQuery Purr


Purr is a jQuery plugin for dynamically displaying unobtrusive messages in the browser. It is designed to behave much as the Mac OS X program "Growl." Other simliar plugins exist: jQuery Growl, jGrowl, but Purr functions quite differently than both of these by accepting an object to turn into a notification instead of building the notification from a series of parameters. This frees the developer to define whatever setup process he wants and keeps all styling external.

Purr is also different in its presentation of the notices. These can be set to fade out on a timer or stay in place until the user decides to close them. In addition, non-sticky notices won't begin their fade out timers until they are the top non-sticky notice in the list. This gives users a better opportunity to read messages that were added close together.


Purr has been successfully, though not extensively, tested on IE7, FF2, FF3, Safari3 Windows, and Opera 9.



  1. Include jQuery:
    1. <script type="text/javascript" src="jquery.js"></script>
  2. Include Purr:
    1. <script type="text/javascript" src="jquery.purr.js"></script>
  3. Build the notice object. This can be done any way you wish, Purr doesn't really care:
    1. <script type="text/javascript">
    2.   var notice = '<div class="notice">'
    3.     + '<div class="notice-body">'
    4.         + '<img src="../static/images/icons/info.png" />'
    5.         + '<h3>Headline</h3>'
    6.         + '<p>Message</p>'
    7.     + '</div>'
    8.     + '<div class="notice-bottom">'
    9.     + '</div>'
    10. + '</div>';
  4. Once the notice is built, simply call Purr on it:
    View Example
    1.   $( notice ).purr();
    2. </script>
  5. Purr accepts several parameters, most of which are adjustments to timing:
    View Example
    1.   $( notice ).purr(
    2.     {
    3.       fadeInSpeed: 200,
    4.       fadeOutSpeed: 2000,
    5.       removeTimer: 5000
    6.     }
    7.   );
    8. </script>
  6. The isSticky parameter allows you to set a notice that won't disapear automatically. Instead the user must manually close a sticky message:
    View Example
    1.   $( notice ).purr(
    2.     {
    3.       isSticky: true,
    4.     }
    5.   );
    6. </script>
  7. The final parameter, usingTransparentPNG, should be set to true if the styling of the notice object is dependent on .png images with transparency. IE7 has issues with combining these images with opacity so Purr will skip the fade in and out animations in IE7:
    View Example
    1.   $( notice ).purr(
    2.     {
    3.       usingTransparentPNG: true,
    4.     }
    5.   );
    6. </script>
  8. All styling of the notice, as well as the structure of the notice itself, happens independently of Purr. Purr only controls the behavior of the notice AS a notice. The two minor exceptions to this are the containing div which uses the id "purr-container," and the close button which has a class of "close." Both of these elements are added through Purr but are styled externally.


• fadeInSpeed
int - default: 500
The duration of the fade in animation in miliseconds.
• fadeOutSpeed
int - default: 500
The duration of the fade out animationin miliseconds.
• removeTimer
int - default: 4000
The timeout, in miliseconds, before the notice is removed once it is the top non-sticky notice in the list.
• isSticky
bool - default: false
Whether the notice should fade out on its own or wait to be manually closed.
• usingTransparentPNG
bool - default: false
Whether or not the notice is using transparent .png images in its styling.


• August 15, 2008 - Version 0.1.0
Initial Release

Site Info

Contact Us

By Phone:
979-696-SITE (7483)
By Email:
Send Email
For Support:
Please visit our Get Satisfaction forum.

About Us

The Kitchen is run by the fine folk at Net Perspective, LLC.

Find out more about The Kitchen or visit us at Net-Perspective.com.


This site, its contents, and its design are © Copyright 2008 - 4250 Net Perspective, LLC. All rights reserved.

Some images used here by permission are copyright of their respective owners. Thanks to Mark James for the fantastic Silk icon set.