1 /**

     2  * jquery.purr.js

     3  * Copyright (c) 2008 Net Perspective (net-perspective.com)

     4  * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)

     5  *

     6  * @author R.A. Ray

     7  * @projectDescription	jQuery plugin for dynamically displaying unobtrusive messages in the browser. Mimics the behavior of the MacOS program "Growl."

     8  * @version 0.1.0

     9  *

    10  * @requires jquery.js (tested with 1.2.6)

    11  *

    12  * @param fadeInSpeed 					int - Duration of fade in animation in miliseconds

    13  * 													default: 500

    14  *	@param fadeOutSpeed  				int - Duration of fade out animationin miliseconds

    15 														default: 500

    16  *	@param removeTimer  				int - Timeout, in miliseconds, before notice is removed once it is the top non-sticky notice in the list

    17 														default: 4000

    18  *	@param isSticky 						bool - Whether the notice should fade out on its own or wait to be manually closed

    19 														default: false

    20  *	@param usingTransparentPNG 	bool - Whether or not the notice is using transparent .png images in its styling

    21 														default: false

    22  */

    23 

    24 ( function( $ ) {

    25 

    26 	$.purr = function ( notice, options )

    27 	{

    28 		// Convert notice to a jQuery object

    29 		notice = $( notice );

    30 

    31 		// Add a class to denote the notice as not sticky

    32 		if ( !options.isSticky )

    33 		{

    34 			notice.addClass( 'not-sticky' );

    35 		};

    36 

    37 		// Get the container element from the page

    38 		var cont = document.getElementById( 'purr-container' );

    39 

    40 		// If the container doesn't yet exist, we need to create it

    41 		if ( !cont )

    42 		{

    43 			cont = '<div id="purr-container"></div>';

    44 		}

    45 

    46 		// Convert cont to a jQuery object

    47 		cont = $( cont );

    48 

    49 		// Add the container to the page

    50 		$( 'body' ).append( cont );

    51 

    52 		notify();

    53 

    54 		function notify ()

    55 		{

    56 			// Set up the close button

    57 			var close = document.createElement( 'a' );

    58 			$( close ).attr(

    59 				{

    60 					className: 'close',

    61 					href: '#close',

    62 					innerHTML: 'Close'

    63 				}

    64 			)

    65 				.appendTo( notice )

    66 					.click( function ()

    67 						{

    68 							removeNotice();

    69 

    70 							return false;

    71 						}

    72 					);

    73 

    74 			// Add the notice to the page and keep it hidden initially

    75 			notice.appendTo( cont )

    76 				.hide();

    77 

    78 			if ( jQuery.browser.msie && options.usingTransparentPNG )

    79 			{

    80 				// IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our

    81 				// notice style, we'll just skip the fading in.

    82 				notice.show();

    83 			}

    84 			else

    85 			{

    86 				//Fade in the notice we just added

    87 				notice.fadeIn( options.fadeInSpeed );

    88 			}

    89 

    90 			// Set up the removal interval for the added notice if that notice is not a sticky

    91 			if ( !options.isSticky )

    92 			{

    93 				var topSpotInt = setInterval( function ()

    94 				{

    95 					// Check to see if our notice is the first non-sticky notice in the list

    96 					if ( notice.prevAll( '.not-sticky' ).length == 0 )

    97 					{

    98 						// Stop checking once the condition is met

    99 						clearInterval( topSpotInt );

   100 

   101 						// Call the close action after the timeout set in options

   102 						setTimeout( function ()

   103 							{

   104 								removeNotice();

   105 							}, options.removeTimer

   106 						);

   107 					}

   108 				}, 200 );

   109 			}

   110 		}

   111 

   112 		function removeNotice ()

   113 		{

   114 			// IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our

   115 			// notice style, we'll just skip the fading out.

   116 			if ( jQuery.browser.msie && options.usingTransparentPNG )

   117 			{

   118 				notice.css( { opacity: 0	} )

   119 					.animate(

   120 						{

   121 							height: '0px'

   122 						},

   123 						{

   124 							duration: options.fadeOutSpeed,

   125 							complete:  function ()

   126 								{

   127 									notice.remove();

   128 								}

   129 							}

   130 					);

   131 			}

   132 			else

   133 			{

   134 				// Fade the object out before reducing its height to produce the sliding effect

   135 				notice.animate(

   136 					{

   137 						opacity: '0'

   138 					},

   139 					{

   140 						duration: options.fadeOutSpeed,

   141 						complete: function ()

   142 							{

   143 								notice.animate(

   144 									{

   145 										height: '0px'

   146 									},

   147 									{

   148 										duration: options.fadeOutSpeed,

   149 										complete: function ()

   150 											{

   151 												notice.remove();

   152 											}

   153 									}

   154 								);

   155 							}

   156 					}

   157 				);

   158 			}

   159 		};

   160 	};

   161 

   162 	$.fn.purr = function ( options )

   163 	{

   164 		options = options || {};

   165 		options.fadeInSpeed = options.fadeInSpeed || 500;

   166 		options.fadeOutSpeed = options.fadeOutSpeed || 500;

   167 		options.removeTimer = options.removeTimer || 4000;

   168 		options.isSticky = options.isSticky || false;

   169 		options.usingTransparentPNG = options.usingTransparentPNG || false;

   170 

   171 		this.each( function()

   172 			{

   173 				new $.purr( this, options );

   174 			}

   175 		);

   176 

   177 		return this;

   178 	};

   179 })( jQuery );

   180