Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
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...
commit 7210ea4e0d7199fc51074786107f4e4b286a69d1 1 parent d87ce96
@brandonaaron authored
View
4 LICENSE.txt
@@ -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
31 README.markdown
@@ -1,10 +1,11 @@
# 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?
@@ -12,19 +13,35 @@ 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
31 bgiframe.jquery.json
@@ -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
95 jquery.bgiframe.js
@@ -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>
View
29 test/SilverlightBalls/assets/ball_n.xaml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="ball_design" Loaded="wpfeLoaded">
+ <TextBlock x:Name="fps" Canvas.Left="10" Canvas.Top="10" Height="40" Canvas.ZIndex="10000" Text="-- fps" />
+ <Canvas x:Name="wpfe_ball_0" Width="52" Height="52" Canvas.Left="0" Canvas.Top="30">
+ <!-- Layer 3/<Group>/<Path> -->
+ <Path Opacity="0.900000" StrokeThickness="2.000000" Stroke="#ffa6d000" StrokeMiterLimit="1.000000" Fill="#ffcbff00" Data="F1 M 51.000000,26.000000 C 51.000000,39.806641 39.807129,51.000000 26.000000,51.000000 C 12.192871,51.000000 1.000000,39.806641 1.000000,26.000000 C 1.000000,12.193359 12.192871,1.000000 26.000000,1.000000 C 39.807129,1.000000 51.000000,12.193359 51.000000,26.000000 Z"/>
+
+ <!-- Layer 3/<Group>/<Path> -->
+ <Path Opacity="0.740000" Data="F1 M 43.143066,13.087891 C 50.602051,22.888672 49.009766,36.642578 39.590332,43.812500 C 30.170898,50.980469 16.489258,48.842773 9.032715,39.042969 C 1.573242,29.240234 3.166016,15.486328 12.584961,8.316406 C 22.003906,1.149414 35.685547,3.285156 43.143066,13.087891 Z">
+ <Path.Fill>
+ <RadialGradientBrush MappingMode="Absolute" GradientOrigin="156.791016,170.453125" Center="156.791016,170.453125" RadiusX="53.626404" RadiusY="53.626404">
+ <RadialGradientBrush.GradientStops>
+ <GradientStop Offset="0.000000" Color="#ffffffff"/>
+ <GradientStop Offset="0.361685" Color="#fff5f7dd"/>
+ <GradientStop Offset="0.415730" Color="#ffebf0bc"/>
+ <GradientStop Offset="1.000000" Color="#ffcbff00"/>
+ </RadialGradientBrush.GradientStops>
+ <RadialGradientBrush.Transform>
+ <MatrixTransform Matrix="1.190000,0.165000,-0.165000,-1.281300,-113.414185,241.757843" />
+ </RadialGradientBrush.Transform>
+ </RadialGradientBrush>
+ </Path.Fill>
+ </Path>
+
+ <!-- Layer 3/<Group>/<Path> -->
+ <Path Fill="#ffffffff" Data="F1 M 23.100586,9.477539 C 24.741699,11.634766 23.116211,15.630859 19.470703,18.404297 C 15.825684,21.178711 11.540039,21.678711 9.899414,19.522461 C 8.258301,17.365234 9.883789,13.369141 13.529297,10.594727 C 17.174316,7.821289 21.459961,7.321289 23.100586,9.477539 Z"/>
+ </Canvas>
+
+</Canvas>
View
22 test/SilverlightBalls/css/style.css
@@ -0,0 +1,22 @@
+body {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 80%; color: #333333; margin:0;}
+.host {border: thin black solid; width: 500px; height: 300px;}
+h2 {color: black; border-bottom: thin #999999 solid; padding-bottom: 15px;}
+img { behavior: url(assets/iepngfix.htc); }
+div {position: relative; overflow: hidden;}
+/*#wpfeHost {display: none;}
+#flashHost {display: none;}*/
+#dhtml_fps {width: 50px; padding: 5px; z-index: 1000;}
+#dhtml_ball_0 {z-index: 0;}
+span {cursor: hand; padding: 8px; margin: 2px; background-color: #ddddff; vertical-align:middle; display: block; float: left;}
+
+#subject {
+ position: absolute;
+ width: 52px;
+ height: 52px;
+ top: 124px;
+ left: 224px;
+}
+#demoControls {
+ margin-top: 10px;
+ margin-bottom: 20px;
+}
View
15 test/SilverlightBalls/js/Silverlight.js
@@ -0,0 +1,15 @@
+///////////////////////////////////////////////////////////////////////////////
+//
+// Silverlight.js (1.1 Preview) version 1.0
+//
+// This file is provided by Microsoft as a helper file for websites that
+// incorporate Silverlight Objects. This file is provided under the Silverlight
+// SDK 1.1 license available at http://go.microsoft.com/fwlink/?linkid=94243.
+// You may not use or distribute this file or the code in this file except as
+// expressly permitted under that license.
+//
+// Copyright (c) 2007 Microsoft Corporation. All rights reserved.
+//
+///////////////////////////////////////////////////////////////////////////////
+
+if(!window.Silverlight)window.Silverlight={};Silverlight._silverlightCount=0;Silverlight.ua=null;Silverlight.available=false;Silverlight.fwlinkRoot="http://go.microsoft.com/fwlink/?LinkID=";Silverlight.StatusText="Get Microsoft Silverlight";Silverlight.EmptyText="";Silverlight.detectUserAgent=function(){var a=window.navigator.userAgent;Silverlight.ua={OS:"Unsupported",Browser:"Unsupported"};if(a.indexOf("Windows NT")>=0)Silverlight.ua.OS="Windows";else if(a.indexOf("PPC Mac OS X")>=0)Silverlight.ua.OS="MacPPC";else if(a.indexOf("Intel Mac OS X")>=0)Silverlight.ua.OS="MacIntel";if(Silverlight.ua.OS!="Unsupported")if(a.indexOf("MSIE")>=0){if(navigator.userAgent.indexOf("Win64")==-1)if(parseInt(a.split("MSIE")[1])>=6)Silverlight.ua.Browser="MSIE"}else if(a.indexOf("Firefox")>=0){var b=a.split("Firefox/")[1].split("."),c=parseInt(b[0]);if(c>=2)Silverlight.ua.Browser="Firefox";else{var d=parseInt(b[1]);if(c==1&&d>=5)Silverlight.ua.Browser="Firefox"}}else if(a.indexOf("Safari")>=0)Silverlight.ua.Browser="Safari"};Silverlight.detectUserAgent();Silverlight.isInstalled=function(d){var c=false,a=null;try{var b=null;if(Silverlight.ua.Browser=="MSIE")b=new ActiveXObject("AgControl.AgControl");else if(navigator.plugins["Silverlight Plug-In"]){a=document.createElement("div");document.body.appendChild(a);a.innerHTML='<embed type="application/x-silverlight" />';b=a.childNodes[0]}if(b.IsVersionSupported(d))c=true;b=null;Silverlight.available=true}catch(e){c=false}if(a)document.body.removeChild(a);return c};Silverlight.createObject=function(l,g,m,j,k,i,h){var b={},a=j,c=k;a.source=l;b.parentElement=g;b.id=Silverlight.HtmlAttributeEncode(m);b.width=Silverlight.HtmlAttributeEncode(a.width);b.height=Silverlight.HtmlAttributeEncode(a.height);b.ignoreBrowserVer=Boolean(a.ignoreBrowserVer);b.inplaceInstallPrompt=Boolean(a.inplaceInstallPrompt);var e=a.version.split(".");b.shortVer=e[0]+"."+e[1];b.version=a.version;a.initParams=i;a.windowless=a.isWindowless;a.maxFramerate=a.framerate;for(var d in c)if(c[d]&&d!="onLoad"&&d!="onError"){a[d]=c[d];c[d]=null}delete a.width;delete a.height;delete a.id;delete a.onLoad;delete a.onError;delete a.ignoreBrowserVer;delete a.inplaceInstallPrompt;delete a.version;delete a.isWindowless;delete a.framerate;if(Silverlight.isInstalled(b.version)){if(Silverlight._silverlightCount==0)if(window.addEventListener)window.addEventListener("onunload",Silverlight.__cleanup,false);else window.attachEvent("onunload",Silverlight.__cleanup);var f=Silverlight._silverlightCount++;a.onLoad="__slLoad"+f;a.onError="__slError"+f;window[a.onLoad]=function(a){if(c.onLoad)c.onLoad(document.getElementById(b.id),h,a)};window[a.onError]=function(a,b){if(c.onError)c.onError(a,b);else Silverlight.default_error_handler(a,b)};slPluginHTML=Silverlight.buildHTML(b,a)}else slPluginHTML=Silverlight.buildPromptHTML(b);if(b.parentElement)b.parentElement.innerHTML=slPluginHTML;else return slPluginHTML};Silverlight.supportedUserAgent=function(c){var a=Silverlight.ua,b=a.OS=="Unsupported"||a.Browser=="Unsupported"||a.OS=="Windows"&&a.Browser=="Safari"||a.OS.indexOf("Mac")>=0&&a.Browser=="IE";if(c=="1.1")return !(b||a.OS=="MacPPC");else return !b};Silverlight.buildHTML=function(c,d){var a=[],e,i,g,f,h;if(Silverlight.ua.Browser=="Safari"){a.push("<embed ");e="";i=" ";g='="';f='"';h=' type="application/x-silverlight"/>'+"<iframe style='visibility:hidden;height:0;width:0'/>"}else{a.push('<object type="application/x-silverlight"');e=">";i=' <param name="';g='" value="';f='" />';h="</object>"}a.push(' id="'+c.id+'" width="'+c.width+'" height="'+c.height+'" '+e);for(var b in d)if(d[b])a.push(i+Silverlight.HtmlAttributeEncode(b)+g+Silverlight.HtmlAttributeEncode(d[b])+f);a.push(h);return a.join("")};Silverlight.default_error_handler=function(e,b){var d,c=b.ErrorType;d=b.ErrorCode;var a="\nSilverlight error message \n";a+="ErrorCode: "+d+"\n";a+="ErrorType: "+c+" \n";a+="Message: "+b.ErrorMessage+" \n";if(c=="ParserError"){a+="XamlFile: "+b.xamlFile+" \n";a+="Line: "+b.lineNumber+" \n";a+="Position: "+b.charPosition+" \n"}else if(c=="RuntimeError"){if(b.lineNumber!=0){a+="Line: "+b.lineNumber+" \n";a+="Position: "+b.charPosition+" \n"}a+="MethodName: "+b.methodName+" \n"}alert(a)};Silverlight.createObjectEx=function(b){var a=b,c=Silverlight.createObject(a.source,a.parentElement,a.id,a.properties,a.events,a.initParams,a.context);if(a.parentElement==null)return c};Silverlight.buildPromptHTML=function(e){var a=null,g=Silverlight.fwlinkRoot,c=Silverlight.ua.OS,b="92822",d;if(e.shortVer=="1.1")e.inplaceInstallPrompt=false;if(e.inplaceInstallPrompt){var i;if(Silverlight.available){d="94376";i="94382"}else{d="92802";i="94381"}var h="93481",f="93483";if(c=="Windows"){b="92799";h="92803";f="92805"}else if(c=="MacIntel"){b="92808";h="92804";f="92806"}else if(c=="MacPPC"){b="92807";h="92815";f="92816"}a='<table border="0" cellpadding="0" cellspacing="0" width="205px"><tr><td><img title="Get Microsoft Silverlight" onclick="javascript:Silverlight.followFWLink({0});" style="border:0; cursor:pointer" src="{1}"/></td></tr><tr><td style="background:#C7C7BD; text-align: center; color: black; font-family: Verdana; font-size: 9px; padding-bottom: 0.05cm; ;padding-top: 0.05cm" >By clicking <b>Get Microsoft Silverlight</b> you accept the <a title="Silverlight License Agreement" href="{2}" target="_top" style="text-decoration: underline; color: #36A6C6"><b>Silverlight license agreement</b></a>.</td></tr><tr><td style="border-left-style: solid; border-right-style: solid; border-width: 2px; border-color:#c7c7bd; background: #817d77; color: #FFFFFF; text-align: center; font-family: Verdana; font-size: 9px">Silverlight updates automatically, <a title="Silverlight Privacy Statement" href="{3}" target="_top" style="text-decoration: underline; color: #36A6C6"><b>learn more</b></a>.</td></tr><tr><td><img src="{4}"/></td></tr></table>';a=a.replace("{2}",g+h);a=a.replace("{3}",g+f);a=a.replace("{4}",g+i)}else{if(e.shortVer=="1.1"){b="92821";if(Silverlight.available)d="94378";else d="92810";if(c=="Windows")b="92809";else if(c=="MacIntel")b="92813"}else{if(Silverlight.available)d="94377";else d="92801";if(c=="Windows")b="92800";else if(c=="MacIntel")b="92812";else if(c=="MacPPC")b="92811"}a='<div style="width: 205px; height: 67px; background-color: #FFFFFF"><img onclick="javascript:Silverlight.followFWLink({0});" style="border:0; cursor:pointer" src="{1}" alt="Get Microsoft Silverlight"/></div>'}a=a.replace("{0}",b);a=a.replace("{1}",g+d);return a};Silverlight.__cleanup=function(){for(var a=Silverlight._silverlightCount-1;a>=0;a--){window["__slLoad"+a]=null;window["__slError"+a]=null}if(window.removeEventListener)window.removeEventListener("unload",Silverlight.__cleanup,false);else window.detachEvent("onunload",Silverlight.__cleanup)};Silverlight.followFWLink=function(a){top.location=Silverlight.fwlinkRoot+String(a)};Silverlight.HtmlAttributeEncode=function(c){var a,b="";if(c==null)return null;for(var d=0;d<c.length;d++){a=c.charCodeAt(d);if(a>96&&a<123||a>64&&a<91||a>43&&a<58&&a!=47||a==95)b=b+String.fromCharCode(a);else b=b+"&#"+a+";"}return b}
View
186 test/SilverlightBalls/js/ball.js
@@ -0,0 +1,186 @@
+/**
+ * @author alex
+ */
+var model = {
+ "walls" : {"left":0, "top":0, "right": 500, "bottom": 300},
+ "elastity" : -0.2,
+ "ballRadius" : 26,
+ "maxSpeed" : 3.0
+};
+
+// helper
+var extend = function(subClass, baseClass)
+{
+ // Create a new class that has an empty constructor
+ // with the members of the baseClass
+ function inheritance() {};
+ inheritance.prototype = baseClass.prototype;
+
+ // set prototype to new instance of baseClass
+ // _without_ the constructor
+ subClass.prototype = new inheritance();
+ subClass.prototype.constructor = subClass;
+ subClass.baseConstructor = baseClass;
+
+ // enable multiple inheritance
+ if (baseClass.base)
+ {
+ baseClass.prototype.base = baseClass.base;
+ }
+ subClass.base = baseClass.prototype;
+}
+
+/**
+ * Base "platform-independent" class representing ball
+ *
+ * @param {Object} x
+ * @param {Object} y
+ * @param {Object} vx
+ * @param {Object} vy
+ */
+function Ball(x, y, vx, vy) {
+ // default provisioning
+ if (x == undefined) {
+ x = (model.walls.right - model.walls.left - 2*model.ballRadius)*Math.random();
+ y = (model.walls.bottom - model.walls.top - 2*model.ballRadius)*Math.random();
+ vx = 2*model.maxSpeed*Math.random() - model.maxSpeed;
+ vy = 2*model.maxSpeed*Math.random() - model.maxSpeed;
+ }
+ this._x = x;
+ this._y = y;
+ this._vx = vx;
+ this._vy = vy;
+ this._r = model.ballRadius; // d = 52 px
+ this._d = 2*this._r;
+ this._d2 = this._d*this._d;
+}
+
+Ball.prototype.move = function() {
+ this._x += this._vx;
+ this._y += this._vy;
+ // walls collisons
+
+ // left
+ if (this._x < model.walls.left && this._vx<0) {
+ //this._vx += (this._x - walls.left)*elastity;
+ this._vx = -this._vx;
+ }
+ // top
+ if (this._y < model.walls.top && this._vy<0) {
+ //this._vy += (this._y - walls.top)*elastity;
+ this._vy = -this._vy;
+ }
+ // left
+ if (this._x > model.walls.right - this._d && this._vx>0) {
+ //this._vx += (this._x - walls.right + this._d)*elastity;
+ this._vx = -this._vx;
+ }
+ // top
+ if (this._y > model.walls.bottom - this._d && this._vy>0) {
+ //this._vy += (this._y - walls.bottom + this._d)*elastity;
+ this._vy = -this._vy;
+ }
+}
+
+Ball.prototype.doCollide = function(b) {
+ // calculate some vectors
+ var dx = this._x - b._x;
+ var dy = this._y - b._y;
+ var dvx = this._vx - b._vx;
+ var dvy = this._vy - b._vy;
+ var distance2 = dx*dx + dy*dy;
+
+ if (Math.abs(dx) > this._d || Math.abs(dy) > this._d)
+ return false;
+ if (distance2 > this._d2)
+ return false;
+
+ // make absolutely elastic collision
+ var mag = dvx*dx + dvy*dy;
+
+ // test that balls move towards each other
+ if (mag > 0)
+ return false;
+
+ mag /= distance2;
+
+ var delta_vx = dx*mag;
+ var delta_vy = dy*mag;
+
+ this._vx -= delta_vx;
+ this._vy -= delta_vy;
+
+ b._vx += delta_vx;
+ b._vy += delta_vy;
+
+ return true;
+}
+
+/**
+ * Abstract test class
+ *
+ * @param {Object} N
+ */
+function BallsTest(N) {
+ this._N = N; // number of objects
+ this._ballsO = new Array();
+ this._isRunning = false;
+}
+
+BallsTest.prototype._showFPS = null;
+
+BallsTest.prototype.start = function(N) {
+ if (this._isRunning) return false;
+ this._isRunning = true;
+
+ if (N != undefined) {
+ this._N = N;
+ }
+
+ this._F = 0; // frames counter for FPS
+ this._lastF = 0;
+ this._lastTime = new Date();
+ var _this = this;
+
+ var moveBalls = function() {
+ if (_this._N > _this._ballsO.length)
+ return;
+ _this._F++;
+ // move balls
+ for (var i=0; i<_this._N; i++) {
+ _this._ballsO[i].move();
+ }
+ // process collisions
+ for (i=0; i<_this._N; i++) {
+ for (j=i+1; j<_this._N; j++) {
+ _this._ballsO[i].doCollide(_this._ballsO[j]);
+ }
+ }
+ }
+ var showFps = function() {
+ if (_this._F - _this._lastF < 10) return;
+ var currTime = new Date();
+ var delta_t = (currTime.getMinutes() - _this._lastTime.getMinutes())*60 + currTime.getSeconds() - _this._lastTime.getSeconds() + (currTime.getMilliseconds() - _this._lastTime.getMilliseconds())/1000.0;
+
+ delete currTime;
+
+ var fps = (_this._F - _this._lastF)/delta_t;
+
+ _this._lastF = _this._F;
+ _this._lastTime = currTime;
+
+ if (_this._showFPS)
+ _this._showFPS.call(_this, Math.round(fps));
+ }
+
+ this._int1 = setInterval(moveBalls, 5);
+ this._int2 = setInterval(showFps, 3000);
+ return true;
+}
+BallsTest.prototype.stop = function(){
+ if (!this._isRunning) return false;
+ this._isRunning = false;
+ clearInterval(this._int1);
+ clearInterval(this._int2);
+ return true;
+}
View
45 test/SilverlightBalls/js/wpfe.ball.js
@@ -0,0 +1,45 @@
+/**
+ * @author alex
+ * @requires ball.js
+ */
+
+/**
+ * WPF/e-specific implementation
+ *
+ * @param {Object} name
+ * @param {Object} x
+ * @param {Object} y
+ * @param {Object} vx
+ * @param {Object} vy
+ */
+function WPFEBall(host, name, x, y, vx, vy) {
+ WPFEBall.baseConstructor.call(this, x, y, vx, vy);
+ this._host = host;
+ this._name = name;
+ this._elem = host.content.findName(name);
+ this.move();
+}
+extend(WPFEBall, Ball);
+
+WPFEBall.prototype.move = function(){
+ WPFEBall.base.move.call(this);
+ this._elem["canvas.left"] = this._x;
+ this._elem["canvas.top"] = this._y;
+}
+
+WPFEBall.prototype.clone = function(newName, is_bmp) {
+ // oops, wpf/e doesn't support objects cloning nor getting their XAML source!
+ // it's just too bad -- I had to paste all XAML right here
+ //
+ var newXAML = "";
+ if (this._is_bmp && this._is_bmp != undefined) {
+ newXAML = '<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="' + newName + '" Width="54.6667" Height="54.6667" Canvas.Left="0" Canvas.Top="0"><Image Source="assets/ball.png"/></Canvas>';
+ } else {
+ newXAML = '<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="' + newName + '" Width="52" Height="52" Canvas.Left="0" Canvas.Top="30"><Path Opacity="0.900000" StrokeThickness="2.000000" Stroke="#ffa6d000" StrokeMiterLimit="1.000000" Fill="#ffcbff00" Data="F1 M 51.000000,26.000000 C 51.000000,39.806641 39.807129,51.000000 26.000000,51.000000 C 12.192871,51.000000 1.000000,39.806641 1.000000,26.000000 C 1.000000,12.193359 12.192871,1.000000 26.000000,1.000000 C 39.807129,1.000000 51.000000,12.193359 51.000000,26.000000 Z"/><Path Opacity="0.740000" Data="F1 M 43.143066,13.087891 C 50.602051,22.888672 49.009766,36.642578 39.590332,43.812500 C 30.170898,50.980469 16.489258,48.842773 9.032715,39.042969 C 1.573242,29.240234 3.166016,15.486328 12.584961,8.316406 C 22.003906,1.149414 35.685547,3.285156 43.143066,13.087891 Z"><Path.Fill><RadialGradientBrush MappingMode="Absolute" GradientOrigin="156.791016,170.453125" Center="156.791016,170.453125" RadiusX="53.626404" RadiusY="53.626404"><RadialGradientBrush.GradientStops><GradientStop Offset="0.000000" Color="#ffffffff"/><GradientStop Offset="0.361685" Color="#fff5f7dd"/><GradientStop Offset="0.415730" Color="#ffebf0bc"/><GradientStop Offset="1.000000" Color="#ffcbff00"/></RadialGradientBrush.GradientStops><RadialGradientBrush.Transform><MatrixTransform Matrix="1.190000,0.165000,-0.165000,-1.281300,-113.414185,241.757843" /></RadialGradientBrush.Transform></RadialGradientBrush></Path.Fill></Path> <Path Fill="#ffffffff" Data="F1 M 23.100586,9.477539 C 24.741699,11.634766 23.116211,15.630859 19.470703,18.404297 C 15.825684,21.178711 11.540039,21.678711 9.899414,19.522461 C 8.258301,17.365234 9.883789,13.369141 13.529297,10.594727 C 17.174316,7.821289 21.459961,7.321289 23.100586,9.477539 Z"/></Canvas>';
+ }
+
+ var newNode = this._host.content.createFromXaml(newXAML);
+ this._elem.getParent().children.add(newNode);
+ return new WPFEBall(this._host, newName);
+}
+
View
135 test/SilverlightBalls/wpfe.htm
@@ -0,0 +1,135 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <title>Balls animation test: Silverlight (WPF/e) vs DHTML vs Flash (Flex) vs WPF vs Apollo vs Java (Swing)</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
+ <script type="text/javascript" src="js/Silverlight.js"></script>
+ <script type="text/javascript" src="js/ball.js"></script>
+ <script type="text/javascript" src="js/wpfe.ball.js"></script>
+ <script>
+ (function(){
+ var verMatch = /v=([\w\.]+)/.exec( location.search ),
+ version = verMatch && verMatch[1], src;
+ if ( version ) {
+ src = 'code.jquery.com/jquery-' + version;
+ } else {
+ src = 'code.jquery.com/jquery-git';
+ }
+ document.write( '<script src="http://' + src + '.js"><\/script>' );
+ })();
+ </script>
+ <script type="text/javascript" src="../../jquery.bgiframe.js"></script>
+ <script>
+ $(function() {
+ 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);
+ });
+ });
+ </script>
+ <style>
+ #wpfe { position: absolute; top: 0px; left: 0px; }
+ #testing { position: relative; z-index: 2; float: left; margin: 5px; border: 5px solid #666; padding: 5px; width: 250px; height: 100px; color: #000; background-color: #999; }
+ #testing div { width: 100%; height: 100%; }
+ </style>
+ </head>
+ <body>
+ <div id="testing"><div>Testing. Click to enlarge by 10px.</div></div>
+ <div id="wpfe">
+ <div id="wpfeHost" class="host">
+ </div>
+ <div style="clear: both;"></div>
+ <script type="text/javascript">
+ Silverlight.createObjectEx(
+ {
+ source: 'assets/ball_n.xaml',
+ parentElement: document.getElementById("wpfeHost"),
+ id: 'wpfeBlock',
+ properties:
+ {
+ width:'500',
+ height:'300',
+ background:'white',
+ isWindowless:'false',
+ framerate:'500',
+ version:'1.0'
+ },
+ events:
+ {
+ onError:null,
+ onLoad:null
+ },
+ context:null
+ }
+ );
+ </script>
+ </div>
+ <script language="JavaScript">
+ /**
+ * Need this function to allow time before Silverlight (WPF/e) host is reloaded
+ *
+ * @param {Object} n
+ */
+ var startOnLoad = true;
+ var isLoaded = false;
+ var numBalls = 16;
+
+ function changeNumberOfBalls(n) {
+ startOnLoad = true;
+ numBalls = n;
+ _wpfeTest.stop();
+ }
+ /**
+ * Silverlight (WPF/e) Balls test
+ *
+ * @param {Object} N
+ */
+ function WPFETest(N) {
+ WPFETest.baseConstructor.call(this, N);
+ this._wpfeBlock = document.getElementById("wpfeBlock");
+ }
+ extend(WPFETest, BallsTest);
+
+ WPFETest.prototype.start = function(N) {
+ if (!WPFETest.base.start.call(this, N)) return;
+ this._savedXaml = this._wpfeBlock.source;
+
+ this._ballsO[0] = new WPFEBall(this._wpfeBlock, "wpfe_ball_0");
+
+ for (var i=1; i<this._N; i++) {
+ this._ballsO[i] = this._ballsO[0].clone("wpfe_ball_" + i);
+ }
+
+ }
+ WPFETest.prototype.stop = function(){
+ if (!WPFETest.base.stop.call(this)) return;
+ //this._wpfeBlock.reload(); this is no longer supported in Silverlight
+ this._wpfeBlock.source = this._savedXaml;
+ isLoaded = false;
+ }
+ WPFETest.prototype._showFPS = function(fps) {
+ this._wpfeBlock.content.findName("fps").text = fps + " fps";
+ }
+
+
+ var _wpfeTest = new WPFETest(numBalls);
+ // called from <Canvas ... Loaded="javascript:wpfeLoaded">
+ function wpfeLoaded() {
+ //alert("hello");
+ if (startOnLoad) {
+ _wpfeTest.start(numBalls);
+ startOnLoad = false;
+ }
+ isLoaded = true;
+ }
+ </script>
+ </body>
+</html>
+
View
201 test/test.html
@@ -0,0 +1,201 @@
+<!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>
+ (function(){
+ var verMatch = /v=([\w\.]+)/.exec( location.search ),
+ version = verMatch && verMatch[1], src;
+ if ( version ) {
+ src = 'code.jquery.com/jquery-' + version;
+ } else {
+ src = 'code.jquery.com/jquery-git';
+ }
+ document.write( '<script src="http://' + src + '.js"><\/script>' );
+ })();
+ </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>
+
Please sign in to comment.
Something went wrong with that request. Please try again.