Permalink
Browse files

A rewrite of the bgiframe.

New conditional option/setting that allows you to run bgiframe on browsers other than IE6.
Since you can now run it on other browsers, the plugin no longer uses CSS Expressions.
Since it no longer uses CSS Expressions, you'll need to re-run the plugin on elements that change width/height/borderWidths.
Added silverlight test which illustrates how to use the plugin outside of IE6 and how to re-run the plugin on objects that get manipulated.
Support AMD loaders.
  • Loading branch information...
1 parent d87ce96 commit 7210ea4e0d7199fc51074786107f4e4b286a69d1 @brandonaaron committed Feb 10, 2013
View
@@ -1,4 +1,4 @@
-Copyright 2010, Brandon Aaron (http://brandonaaron.net/)
+Copyright 2013, 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
@@ -17,4 +17,4 @@ 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.
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
@@ -1,30 +1,47 @@
# bgiframe
-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.
+Plugin has been rewritten to remove the use of CSS Expressions and to lift the restriction to IE6 only. The IE6 limitation is on by default but is now configurable by passing the `conditional` option. You may want to do this for instance if you are trying to layer on top of Silverlight in later IE versions. As a result of removing the CSS Expressions, you'll now need to re-run the bgiframe on elements that change their width, height, and/or borders after they are changed.
+
+The bgiframe plugin is chainable and applies the iframe hack to get around zIndex issues. It will only apply itself in IE6 (by default) 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();
+If your element changes width, height, or border widths then you'll need to call bgiframe on those elements after the change.
+
+Here is an example of using a different conditional and recalling `bgiframe` on the manipulated element.
+
+ var settings = { conditional: /MSIE/.test(navigator.userAgent) },
+ $testing = $('#testing');
+ $testing
+ .bgiframe(settings)
+ .bind('click', function(e) {
+ $testing
+ .width( $testing.width() + 10 )
+ .height( $testing.height() + 10 )
+ .bgiframe(settings);
+ });
+
### 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.
+* `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 the elements border top width as calculated by jQuery.
+* `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 the elements border left width as calculated by jQuery.
+* `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 the offsetWidth of the element.
+* `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 the offsetHeight of the element.
* `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;"
+* `conditional` *(Boolean|Function)*: Turn on or off the injection of the iFrame. `true` to turn on the iFrame and `false` to turn it off. Default is IE6 only conditional.
## License
The bgiframe plugin is licensed under the MIT License (LICENSE.txt).
-Copyright (c) 2010 [Brandon Aaron](http://brandonaaron.net)
+Copyright (c) 2013 [Brandon Aaron](http://brandonaaron.net)
View
@@ -0,0 +1,31 @@
+{
+ "name": "bgiframe",
+ "title": "bgiframe",
+ "description": "A jQuery plugin that helps ease the pain when having to deal with IE z-index issues.",
+ "keywords": [
+ "z-index",
+ "iframe",
+ "ie6",
+ "silverlight",
+ "issues",
+ "bgiframe",
+ "background"
+ ],
+ "version": "3.0.0",
+ "author": {
+ "name": "Brandon Aaron",
+ "url": "http://brandonaaron.net"
+ },
+ "licenses": [
+ {
+ "type": "MIT",
+ "url": "https://raw.github.com/brandonaaron/bgiframe/master/LICENSE.txt"
+ }
+ ],
+ "bugs": "https://github.com/brandonaaron/bgiframe/issues",
+ "homepage": "https://github.com/brandonaaron/bgiframe",
+ "download": "https://github.com/brandonaaron/bgiframe/tags",
+ "dependencies": {
+ "jquery": ">=1.2.6"
+ }
+}
View
@@ -1,39 +1,64 @@
-/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
+/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
- * Version 2.1.3-pre
+ * Version 3.0.0
*/
-(function($){
-
-$.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);
+(function (factory) {
+ if (typeof define === 'function' && define.amd) {
+ // AMD. Register as an anonymous module.
+ define(['jquery'], factory);
+ } else {
+ // Browser globals
+ factory(jQuery);
+ }
+}(function ($) {
+ $.fn.bgiframe = function(s) {
+ s = $.extend({
+ top : 'auto', // auto == borderTopWidth
+ left : 'auto', // auto == borderLeftWidth
+ width : 'auto', // auto == offsetWidth
+ height : 'auto', // auto == offsetHeight
+ opacity : true,
+ src : 'javascript:false;',
+ conditional : /MSIE 6.0/.test(navigator.userAgent) // expresion or function. return false to prevent iframe insertion
+ }, s);
+
+ // wrap conditional in a function if it isn't already
+ if (!$.isFunction(s.conditional)) {
+ var condition = s.conditional;
+ s.conditional = function() { return condition; };
+ }
+
+ var $iframe = $('<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+
+ 'style="display:block;position:absolute;z-index:-1;"/>');
+
+ return this.each(function() {
+ var $this = $(this);
+ if ( s.conditional(this) === false ) { return; }
+ var existing = $this.children('iframe.bgiframe');
+ var $el = existing.length === 0 ? $iframe.clone() : existing;
+ $el.css({
+ 'top': s.top == 'auto' ?
+ ((parseInt($this.css('borderTopWidth'),10)||0)*-1)+'px' : prop(s.top),
+ 'left': s.left == 'auto' ?
+ ((parseInt($this.css('borderLeftWidth'),10)||0)*-1)+'px' : prop(s.left),
+ 'width': s.width == 'auto' ? (this.offsetWidth + 'px') : prop(s.width),
+ 'height': s.height == 'auto' ? (this.offsetHeight + 'px') : prop(s.height),
+ 'opacity': s.opacity === true ? 0 : undefined
+ });
+
+ if ( existing.length === 0 ) {
+ $this.prepend($el);
+ }
+ });
+ };
+
+ // old alias
+ $.fn.bgIframe = $.fn.bgiframe;
+
+ function prop(n) {
+ return n && n.constructor === Number ? n + 'px' : n;
+ }
+
+}));
View
189 test.html
@@ -1,189 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
-<html debug="true">
- <head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8">
- <title>jQuery bgiframe Visual Test</title>
- <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() {
- $('#box2').bgiframe();
- $('#box3').bgiframe({top: -5, left: -5});
- $('#box4').bgiframe({top: -5, left: -5, width: 270, height: 120});
- $('#box5').bgiframe({top: 0, left: 0, width: 260, height: 110});
- $('#box6').bgiframe({top: '-5px', left: '-5px', width: '270px', height: '120px'});
- $('#box7').bgiframe({top: '-.5em', left: '-.5em', width: '17em', height: '12em'});
- $('#box8').bgiframe({top: '-.5em', left: '-.5em'});
- $('#box9').bgiframe({opacity:false});
- });
- </script>
-
- <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; 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; }
- dt { float: left; margin: 0; padding: 0; width: 50px; }
- dd { margin: 0; padding: 0; }
- #box7, #box8 { border-width: .5em; padding: .5em; width: 15em; height: 10em; }
- </style>
- </head>
- <body>
- <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>
- <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>
- <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>
- <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>
- <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>
- <div id="box2" class="box">
- <dl>
- <dt>top:</dt>
- <dd>'auto'</dd>
-
- <dt>left:</dt>
- <dd>'auto'</dd>
-
- <dt>width:</dt>
- <dd>'auto'</dd>
-
- <dt>height:</dt>
- <dd>'auto'</dd>
- </dl>
- </div>
- <div id="box3" class="box">
- <dl>
- <dt>top:</dt>
- <dd>0</dd>
-
- <dt>left:</dt>
- <dd>0</dd>
-
- <dt>width:</dt>
- <dd>'auto'</dd>
-
- <dt>height:</dt>
- <dd>'auto'</dd>
- </dl>
- </div>
- <div id="box4" class="box">
- <dl>
- <dt>top:</dt>
- <dd>-5</dd>
-
- <dt>left:</dt>
- <dd>-5</dd>
-
- <dt>width:</dt>
- <dd>270</dd>
-
- <dt>height:</dt>
- <dd>120</dd>
- </dl>
- </div>
- <div id="box5" class="box">
- <dl>
- <dt>top:</dt>
- <dd>0</dd>
-
- <dt>left:</dt>
- <dd>0</dd>
-
- <dt>width:</dt>
- <dd>260</dd>
-
- <dt>height:</dt>
- <dd>110</dd>
- </dl>
- </div>
- <div id="box6" class="box">
- <dl>
- <dt>top:</dt>
- <dd>'-5px'</dd>
-
- <dt>left:</dt>
- <dd>'-5px'</dd>
-
- <dt>width:</dt>
- <dd>'270px'</dd>
-
- <dt>height:</dt>
- <dd>'120px'</dd>
- </dl>
- </div>
- <div id="box7" class="box">
- <dl>
- <dt>top:</dt>
- <dd>'-.5em'</dd>
-
- <dt>left:</dt>
- <dd>'-.5em'</dd>
-
- <dt>width:</dt>
- <dd>'17em'</dd>
-
- <dt>height:</dt>
- <dd>'12em'</dd>
- </dl>
- </div>
- <div id="box8" class="box">
- <dl>
- <dt>top:</dt>
- <dd>'-.5em'</dd>
-
- <dt>left:</dt>
- <dd>'-.5em'</dd>
-
- <dt>width:</dt>
- <dd>'auto'</dd>
-
- <dt>height:</dt>
- <dd>'auto'</dd>
- </dl>
- </div>
- <div id="box9" class="box">
- <dl>
- <dt>top:</dt>
- <dd>'auto'</dd>
-
- <dt>left:</dt>
- <dd>'auto'</dd>
-
- <dt>width:</dt>
- <dd>'auto'</dd>
-
- <dt>height:</dt>
- <dd>'auto'</dd>
-
- <dt>opacity:</dt>
- <dd>false</dd>
- </dl>
- </div>
- </div>
- </body>
-</html>
Oops, something went wrong.

0 comments on commit 7210ea4

Please sign in to comment.