Skip to content
Browse files

updating readme, a few tweaks, fixed visual test

  • Loading branch information...
1 parent 717f112 commit aff6a0a0fb265334ff33d97126d1bd8c2306096d Brandon Aaron committed
Showing with 87 additions and 108 deletions.
  1. +5 −0 ChangeLog.markdown
  2. +20 −0 LICENSE.txt
  3. +23 −3 README.markdown
  4. +32 −90 jquery.bgiframe.js
  5. +7 −15 test/index.html → test.html
View
5 ChangeLog.markdown
@@ -1,5 +1,10 @@
# bgiframe Change Log
+## 2.1.2
+
+* Fixed visual test (test.html)
+* Small optimization to only check for IE once
+
## 2.1.1
* Removed $.browser.version for jQuery < 1.1.3
View
20 LICENSE.txt
@@ -0,0 +1,20 @@
+Copyright 2010, Brandon Aaron (http://brandonaaron.net/)
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
26 README.markdown
@@ -1,10 +1,30 @@
# bgiframe
-A jQuery plugin that helps ease the pain when having to deal with IE z-index issues.
+The bgiframe plugin is chainable and applies the iframe hack to get around zIndex issues in IE6. It will only apply itself in IE6 and adds a class to the iframe called 'bgiframe'. The iframe is appended as the first child of the matched element(s) with a tabIndex and zIndex of -1.
+By default the plugin will take borders, sized with pixel units, into account. If a different unit is used for the border's width, then you will need to use the top and left settings as explained below.
+
+**NOTICE:** This plugin has been reported to cause performance problems when used on elements that change properties (like width, height and opacity) a lot in IE6. Most of these problems have been caused by the expressions used to calculate the elements width, height and borders. Some have reported it is due to the opacity filter. All these settings can be changed if needed as explained below.
+
+## How do I use it?
+
+The usage is simple. Just call bgiframe on a jQuery collection of elements.
+
+ $('.fix-z-index').bgiframe();
+
+### Settings
+
+The plugin tries its best to handle most situations but sometimes some configuration is necessary. The following is a list of available settings.
+
+* `top` *(String|Number)*: The iframe must be offset to the top by the width of the top border. This should be a negative number representing the border-top-width. If a number is used here, pixels will be assumed. Otherwise, be sure to specify a unit. An expression could also be used. By default the value is "auto" which will use an expression to get the border-top-width if it is in pixels.
+* `left` *(String|Number)*: The iframe must be offset to the left by the width of the left border. This should be a negative number representing the border-left-width. If a number is is used here, pixels will be assumed. Otherwise, be sure to specify a unit. An expression could also be used. By default the value is "auto" which will use an expression to get the border-left-width if it is in pixels.
+* `width` *(String|Number)*: This is the width of the iframe. If a number is used here, pixels will be assume. Otherwise, be sure to specify a unit. An expression could also be used. By default the value is "auto" which will use an expression to get the offsetWidth.
+* `height` *(String|Number)*: This is the height of the iframe. If a number is used here, pixels will be assume. Otherwise, be sure to specify a unit. An expression could also be used. By default the value is "auto" which will use an expression to get the offsetHeight.
+* `opacity` *(Boolean)*: This is a boolean representing whether or not to use opacity. If set to true, the opacity of 0 is applied. If set to false, the opacity filter is not applied. Default: true.
+* `src` *(String)*: This setting is provided so that one could change the src of the iframe to whatever they need. Default: "javascript:false;"
## License
-The bgiframe plugin is dual licensed *(just like jQuery)* under the [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL](http://www.opensource.org/licenses/gpl-license.php) licenses.
+The bgiframe plugin is licensed under the MIT License (LICENSE.txt).
-Copyright (c) 2008 [Brandon Aaron](http://brandonaaron.net)
+Copyright (c) 2010 [Brandon Aaron](http://brandonaaron.net)
View
122 jquery.bgiframe.js
@@ -1,97 +1,39 @@
-/*! Copyright (c) 2008 Brandon Aaron (http://brandonaaron.net)
- * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
- * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
*
- * Version 2.1.2-pre
+ * Version 2.1.2
*/
(function($){
-/**
- * The bgiframe is chainable and applies the iframe hack to get
- * around zIndex issues in IE6. It will only apply itself in IE6
- * and adds a class to the iframe called 'bgiframe'. The iframe
- * is appeneded as the first child of the matched element(s)
- * with a tabIndex and zIndex of -1.
- *
- * By default the plugin will take borders, sized with pixel units,
- * into account. If a different unit is used for the border's width,
- * then you will need to use the top and left settings as explained below.
- *
- * NOTICE: This plugin has been reported to cause perfromance problems
- * when used on elements that change properties (like width, height and
- * opacity) a lot in IE6. Most of these problems have been caused by
- * the expressions used to calculate the elements width, height and
- * borders. Some have reported it is due to the opacity filter. All
- * these settings can be changed if needed as explained below.
- *
- * @example $('div').bgiframe();
- * @before <div><p>Paragraph</p></div>
- * @result <div><iframe class="bgiframe".../><p>Paragraph</p></div>
- *
- * @param Map settings Optional settings to configure the iframe.
- * @option String|Number top The iframe must be offset to the top
- * by the width of the top border. This should be a negative
- * number representing the border-top-width. If a number is
- * is used here, pixels will be assumed. Otherwise, be sure
- * to specify a unit. An expression could also be used.
- * By default the value is "auto" which will use an expression
- * to get the border-top-width if it is in pixels.
- * @option String|Number left The iframe must be offset to the left
- * by the width of the left border. This should be a negative
- * number representing the border-left-width. If a number is
- * is used here, pixels will be assumed. Otherwise, be sure
- * to specify a unit. An expression could also be used.
- * By default the value is "auto" which will use an expression
- * to get the border-left-width if it is in pixels.
- * @option String|Number width This is the width of the iframe. If
- * a number is used here, pixels will be assume. Otherwise, be sure
- * to specify a unit. An experssion could also be used.
- * By default the value is "auto" which will use an experssion
- * to get the offsetWidth.
- * @option String|Number height This is the height of the iframe. If
- * a number is used here, pixels will be assume. Otherwise, be sure
- * to specify a unit. An experssion could also be used.
- * By default the value is "auto" which will use an experssion
- * to get the offsetHeight.
- * @option Boolean opacity This is a boolean representing whether or not
- * to use opacity. If set to true, the opacity of 0 is applied. If
- * set to false, the opacity filter is not applied. Default: true.
- * @option String src This setting is provided so that one could change
- * the src of the iframe to whatever they need.
- * Default: "javascript:false;"
- *
- * @name bgiframe
- * @type jQuery
- * @cat Plugins/bgiframe
- * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
- */
-$.fn.bgIframe = $.fn.bgiframe = function(s) {
- // This is only for IE6
- if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
- s = $.extend({
- top : 'auto', // auto == .currentStyle.borderTopWidth
- left : 'auto', // auto == .currentStyle.borderLeftWidth
- width : 'auto', // auto == offsetWidth
- height : 'auto', // auto == offsetHeight
- opacity : true,
- src : 'javascript:false;'
- }, s || {});
- var prop = function(n){return n&&n.constructor==Number?n+'px':n;},
- html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+
- 'style="display:block;position:absolute;z-index:-1;'+
- (s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+
- 'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+
- 'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+
- 'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+
- 'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
- '"/>';
- return this.each(function() {
- if ( $('> iframe.bgiframe', this).length == 0 )
- this.insertBefore( document.createElement(html), this.firstChild );
- });
- }
- return this;
-};
+$.fn.bgiframe = ($.browser.msie && /msie 6\.0/i.test(navigator.userAgent) ? function(s) {
+ s = $.extend({
+ top : 'auto', // auto == .currentStyle.borderTopWidth
+ left : 'auto', // auto == .currentStyle.borderLeftWidth
+ width : 'auto', // auto == offsetWidth
+ height : 'auto', // auto == offsetHeight
+ opacity : true,
+ src : 'javascript:false;'
+ }, s);
+ var html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+
+ 'style="display:block;position:absolute;z-index:-1;'+
+ (s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+
+ 'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+
+ 'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+
+ 'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+
+ 'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
+ '"/>';
+ return this.each(function() {
+ if ( $(this).children('iframe.bgiframe').length === 0 )
+ this.insertBefore( document.createElement(html), this.firstChild );
+ });
+} : function() { return this; });
+
+// old alias
+$.fn.bgIframe = $.fn.bgiframe;
+
+function prop(n) {
+ return n && n.constructor === Number ? n + 'px' : n;
+}
})(jQuery);
View
22 test/index.html → test.html
@@ -4,21 +4,11 @@
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>jQuery bgiframe Visual Test</title>
-
- <!-- load latest build of jquery.js -->
- <script type="text/javascript" src="../../../jquery/dist/jquery.js"></script>
-
- <!-- load dimensions.js (this is what we're testing! -->
- <script type="text/javascript" src="../jquery.bgiframe.js"></script>
-
- <!-- load firebug lite
- <script type="text/javascript" src="http://brandon.jquery.com/firebuglite/firebug.js"></script>-->
-
- <link rel="Stylesheet" media="screen" href="../../../qunit/testsuite.css" />
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
+ <script type="text/javascript" src="jquery.bgiframe.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
- $('#userAgent').html(navigator.userAgent);
$('#box2').bgiframe();
$('#box3').bgiframe({top: -5, left: -5});
$('#box4').bgiframe({top: -5, left: -5, width: 270, height: 120});
@@ -33,7 +23,7 @@
<style type="text/css" media="screen">
#wrapper { position: relative; width: 100%; font: 12px Arial; }
form { position: absolute; top: 0; left: 0; width: 100%; }
- select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; }
+ select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; color: #ccc; }
.box { position: relative; z-index: 2; float: left; margin: 5px; border: 5px solid #666; padding: 5px; width: 250px; height: 100px; color: #000; background-color: #999; }
dl { margin: 0; padding: 0; }
@@ -43,8 +33,7 @@
</style>
</head>
<body>
- <h1 id="banner">jQuery bgiframe - Visual Test</h1>
- <h2 id="userAgent"></h2>
+ <h1>jQuery bgiframe - Visual Test</h1>
<div id="wrapper">
<form action="#" method="get" accept-charset="utf-8">
<select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
@@ -66,6 +55,9 @@ <h2 id="userAgent"></h2>
<select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
<select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
<select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
+ <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
+ <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
+ <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
</form>
<div id="box1" class="box">nothing</div>

0 comments on commit aff6a0a

Please sign in to comment.
Something went wrong with that request. Please try again.