The Kitchen @ Net Perspective

jQuery Purr

Overview

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.

Compatibility

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

Requirements

• jQuery (tested with 1.2.6)

Installation

1. Include jQuery:
   1. <script type="text/javascript" src="jquery.js"></script>
2. Include Purr:
   2. <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:
   6. <script type="text/javascript">
   7.   var notice = '<div class="notice">'
   8.     + '<div class="notice-body">'
   9.         + '<img src="../static/images/icons/info.png" />'
   10.         + '<h3>Headline</h3>'
   11.         + '<p>Message</p>'
   12.     + '</div>'
   13.     + '<div class="notice-bottom">'
   14.     + '</div>'
   15. + '</div>';
4. Once the notice is built, simply call Purr on it:
   View Example
   17.   $( notice ).purr();
   18. </script>
5. Purr accepts several parameters, most of which are adjustments to timing:
   View Example
   17.   $( notice ).purr(
   18.     {
   19.       fadeInSpeed: 200,
   20.       fadeOutSpeed: 2000,
   21.       removeTimer: 5000
   22.     }
   23.   );
   24. </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
   17.   $( notice ).purr(
   18.     {
   19.       isSticky: true,
   20.     }
   21.   );
   22. </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
   17.   $( notice ).purr(
   18.     {
   19.       usingTransparentPNG: true,
   20.     }
   21.   );
   22. </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.

Parameters

• 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.

History

• August 15, 2008 - Version 0.1.0

Initial Release