1 /* Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net)

     2  * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)

     3  * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.

     4  *

     5  * $LastChangedDate: 2007-07-21 18:44:59 -0500 (Sat, 21 Jul 2007) $

     6  * $Rev: 2446 $

     7  *

     8  * Version 2.1.1

     9  */

    10 

    11 (function($){

    12 

    13 /**

    14  * The bgiframe is chainable and applies the iframe hack to get

    15  * around zIndex issues in IE6. It will only apply itself in IE6

    16  * and adds a class to the iframe called 'bgiframe'. The iframe

    17  * is appeneded as the first child of the matched element(s)

    18  * with a tabIndex and zIndex of -1.

    19  *

    20  * By default the plugin will take borders, sized with pixel units,

    21  * into account. If a different unit is used for the border's width,

    22  * then you will need to use the top and left settings as explained below.

    23  *

    24  * NOTICE: This plugin has been reported to cause perfromance problems

    25  * when used on elements that change properties (like width, height and

    26  * opacity) a lot in IE6. Most of these problems have been caused by

    27  * the expressions used to calculate the elements width, height and

    28  * borders. Some have reported it is due to the opacity filter. All

    29  * these settings can be changed if needed as explained below.

    30  *

    31  * @example $('div').bgiframe();

    32  * @before <div><p>Paragraph</p></div>

    33  * @result <div><iframe class="bgiframe".../><p>Paragraph</p></div>

    34  *

    35  * @param Map settings Optional settings to configure the iframe.

    36  * @option String|Number top The iframe must be offset to the top

    37  * 		by the width of the top border. This should be a negative

    38  *      number representing the border-top-width. If a number is

    39  * 		is used here, pixels will be assumed. Otherwise, be sure

    40  *		to specify a unit. An expression could also be used.

    41  * 		By default the value is "auto" which will use an expression

    42  * 		to get the border-top-width if it is in pixels.

    43  * @option String|Number left The iframe must be offset to the left

    44  * 		by the width of the left border. This should be a negative

    45  *      number representing the border-left-width. If a number is

    46  * 		is used here, pixels will be assumed. Otherwise, be sure

    47  *		to specify a unit. An expression could also be used.

    48  * 		By default the value is "auto" which will use an expression

    49  * 		to get the border-left-width if it is in pixels.

    50  * @option String|Number width This is the width of the iframe. If

    51  *		a number is used here, pixels will be assume. Otherwise, be sure

    52  * 		to specify a unit. An experssion could also be used.

    53  *		By default the value is "auto" which will use an experssion

    54  * 		to get the offsetWidth.

    55  * @option String|Number height This is the height of the iframe. If

    56  *		a number is used here, pixels will be assume. Otherwise, be sure

    57  * 		to specify a unit. An experssion could also be used.

    58  *		By default the value is "auto" which will use an experssion

    59  * 		to get the offsetHeight.

    60  * @option Boolean opacity This is a boolean representing whether or not

    61  * 		to use opacity. If set to true, the opacity of 0 is applied. If

    62  *		set to false, the opacity filter is not applied. Default: true.

    63  * @option String src This setting is provided so that one could change

    64  *		the src of the iframe to whatever they need.

    65  *		Default: "javascript:false;"

    66  *

    67  * @name bgiframe

    68  * @type jQuery

    69  * @cat Plugins/bgiframe

    70  * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)

    71  */

    72 $.fn.bgIframe = $.fn.bgiframe = function(s) {

    73 	// This is only for IE6

    74 	if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {

    75 		s = $.extend({

    76 			top     : 'auto', // auto == .currentStyle.borderTopWidth

    77 			left    : 'auto', // auto == .currentStyle.borderLeftWidth

    78 			width   : 'auto', // auto == offsetWidth

    79 			height  : 'auto', // auto == offsetHeight

    80 			opacity : true,

    81 			src     : 'javascript:false;'

    82 		}, s || {});

    83 		var prop = function(n){return n&&n.constructor==Number?n+'px':n;},

    84 		    html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+

    85 		               'style="display:block;position:absolute;z-index:-1;'+

    86 			               (s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+

    87 					       'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+

    88 					       'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+

    89 					       'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+

    90 					       'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+

    91 					'"/>';

    92 		return this.each(function() {

    93 			if ( $('> iframe.bgiframe', this).length == 0 )

    94 				this.insertBefore( document.createElement(html), this.firstChild );

    95 		});

    96 	}

    97 	return this;

    98 };

    99 

   100 })(jQuery);