eads@18
|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
eads@18
|
2 "http://www.w3.org/TR/html4/strict.dtd"> |
eads@18
|
3 <html debug="true"> |
eads@18
|
4 <head> |
eads@18
|
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
eads@18
|
6 <title>jQuery bgiframe Visual Test</title> |
eads@18
|
7 |
eads@18
|
8 <!-- load latest build of jquery.js --> |
eads@18
|
9 <script type="text/javascript" src="../../../jquery/dist/jquery.js"></script> |
eads@18
|
10 |
eads@18
|
11 <!-- load dimensions.js (this is what we're testing! --> |
eads@18
|
12 <script type="text/javascript" src="../jquery.bgiframe.js"></script> |
eads@18
|
13 |
eads@18
|
14 <!-- load firebug lite |
eads@18
|
15 <script type="text/javascript" src="http://brandon.jquery.com/firebuglite/firebug.js"></script>--> |
eads@18
|
16 |
eads@18
|
17 <link rel="Stylesheet" media="screen" href="../../../jquery/test/data/testsuite.css" /> |
eads@18
|
18 |
eads@18
|
19 <script type="text/javascript" charset="utf-8"> |
eads@18
|
20 $(function() { |
eads@18
|
21 $('#userAgent').html(navigator.userAgent); |
eads@18
|
22 $('#box2').bgiframe(); |
eads@18
|
23 $('#box3').bgiframe({top: -5, left: -5}); |
eads@18
|
24 $('#box4').bgiframe({top: -5, left: -5, width: 270, height: 120}); |
eads@18
|
25 $('#box5').bgiframe({top: 0, left: 0, width: 260, height: 110}); |
eads@18
|
26 $('#box6').bgiframe({top: '-5px', left: '-5px', width: '270px', height: '120px'}); |
eads@18
|
27 $('#box7').bgiframe({top: '-.5em', left: '-.5em', width: '17em', height: '12em'}); |
eads@18
|
28 $('#box8').bgiframe({top: '-.5em', left: '-.5em'}); |
eads@18
|
29 $('#box9').bgiframe({opacity:false}); |
eads@18
|
30 }); |
eads@18
|
31 </script> |
eads@18
|
32 |
eads@18
|
33 <style type="text/css" media="screen"> |
eads@18
|
34 #wrapper { position: relative; width: 100%; font: 12px Arial; } |
eads@18
|
35 form { position: absolute; top: 0; left: 0; width: 100%; } |
eads@18
|
36 select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; } |
eads@18
|
37 |
eads@18
|
38 .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; } |
eads@18
|
39 dl { margin: 0; padding: 0; } |
eads@18
|
40 dt { float: left; margin: 0; padding: 0; width: 50px; } |
eads@18
|
41 dd { margin: 0; padding: 0; } |
eads@18
|
42 #box7, #box8 { border-width: .5em; padding: .5em; width: 15em; height: 10em; } |
eads@18
|
43 </style> |
eads@18
|
44 </head> |
eads@18
|
45 <body> |
eads@18
|
46 <h1 id="banner">jQuery bgiframe - Visual Test</h1> |
eads@18
|
47 <h2 id="userAgent"></h2> |
eads@18
|
48 <div id="wrapper"> |
eads@18
|
49 <form action="#" method="get" accept-charset="utf-8"> |
eads@18
|
50 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
51 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
52 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
53 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
54 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
55 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
56 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
57 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
58 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
59 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
60 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
61 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
62 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
63 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
64 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
65 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
66 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
67 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
68 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select> |
eads@18
|
69 </form> |
eads@18
|
70 |
eads@18
|
71 <div id="box1" class="box">nothing</div> |
eads@18
|
72 <div id="box2" class="box"> |
eads@18
|
73 <dl> |
eads@18
|
74 <dt>top:</dt> |
eads@18
|
75 <dd>'auto'</dd> |
eads@18
|
76 |
eads@18
|
77 <dt>left:</dt> |
eads@18
|
78 <dd>'auto'</dd> |
eads@18
|
79 |
eads@18
|
80 <dt>width:</dt> |
eads@18
|
81 <dd>'auto'</dd> |
eads@18
|
82 |
eads@18
|
83 <dt>height:</dt> |
eads@18
|
84 <dd>'auto'</dd> |
eads@18
|
85 </dl> |
eads@18
|
86 </div> |
eads@18
|
87 <div id="box3" class="box"> |
eads@18
|
88 <dl> |
eads@18
|
89 <dt>top:</dt> |
eads@18
|
90 <dd>0</dd> |
eads@18
|
91 |
eads@18
|
92 <dt>left:</dt> |
eads@18
|
93 <dd>0</dd> |
eads@18
|
94 |
eads@18
|
95 <dt>width:</dt> |
eads@18
|
96 <dd>'auto'</dd> |
eads@18
|
97 |
eads@18
|
98 <dt>height:</dt> |
eads@18
|
99 <dd>'auto'</dd> |
eads@18
|
100 </dl> |
eads@18
|
101 </div> |
eads@18
|
102 <div id="box4" class="box"> |
eads@18
|
103 <dl> |
eads@18
|
104 <dt>top:</dt> |
eads@18
|
105 <dd>-5</dd> |
eads@18
|
106 |
eads@18
|
107 <dt>left:</dt> |
eads@18
|
108 <dd>-5</dd> |
eads@18
|
109 |
eads@18
|
110 <dt>width:</dt> |
eads@18
|
111 <dd>270</dd> |
eads@18
|
112 |
eads@18
|
113 <dt>height:</dt> |
eads@18
|
114 <dd>120</dd> |
eads@18
|
115 </dl> |
eads@18
|
116 </div> |
eads@18
|
117 <div id="box5" class="box"> |
eads@18
|
118 <dl> |
eads@18
|
119 <dt>top:</dt> |
eads@18
|
120 <dd>0</dd> |
eads@18
|
121 |
eads@18
|
122 <dt>left:</dt> |
eads@18
|
123 <dd>0</dd> |
eads@18
|
124 |
eads@18
|
125 <dt>width:</dt> |
eads@18
|
126 <dd>260</dd> |
eads@18
|
127 |
eads@18
|
128 <dt>height:</dt> |
eads@18
|
129 <dd>110</dd> |
eads@18
|
130 </dl> |
eads@18
|
131 </div> |
eads@18
|
132 <div id="box6" class="box"> |
eads@18
|
133 <dl> |
eads@18
|
134 <dt>top:</dt> |
eads@18
|
135 <dd>'-5px'</dd> |
eads@18
|
136 |
eads@18
|
137 <dt>left:</dt> |
eads@18
|
138 <dd>'-5px'</dd> |
eads@18
|
139 |
eads@18
|
140 <dt>width:</dt> |
eads@18
|
141 <dd>'270px'</dd> |
eads@18
|
142 |
eads@18
|
143 <dt>height:</dt> |
eads@18
|
144 <dd>'120px'</dd> |
eads@18
|
145 </dl> |
eads@18
|
146 </div> |
eads@18
|
147 <div id="box7" class="box"> |
eads@18
|
148 <dl> |
eads@18
|
149 <dt>top:</dt> |
eads@18
|
150 <dd>'-.5em'</dd> |
eads@18
|
151 |
eads@18
|
152 <dt>left:</dt> |
eads@18
|
153 <dd>'-.5em'</dd> |
eads@18
|
154 |
eads@18
|
155 <dt>width:</dt> |
eads@18
|
156 <dd>'17em'</dd> |
eads@18
|
157 |
eads@18
|
158 <dt>height:</dt> |
eads@18
|
159 <dd>'12em'</dd> |
eads@18
|
160 </dl> |
eads@18
|
161 </div> |
eads@18
|
162 <div id="box8" class="box"> |
eads@18
|
163 <dl> |
eads@18
|
164 <dt>top:</dt> |
eads@18
|
165 <dd>'-.5em'</dd> |
eads@18
|
166 |
eads@18
|
167 <dt>left:</dt> |
eads@18
|
168 <dd>'-.5em'</dd> |
eads@18
|
169 |
eads@18
|
170 <dt>width:</dt> |
eads@18
|
171 <dd>'auto'</dd> |
eads@18
|
172 |
eads@18
|
173 <dt>height:</dt> |
eads@18
|
174 <dd>'auto'</dd> |
eads@18
|
175 </dl> |
eads@18
|
176 </div> |
eads@18
|
177 <div id="box9" class="box"> |
eads@18
|
178 <dl> |
eads@18
|
179 <dt>top:</dt> |
eads@18
|
180 <dd>'auto'</dd> |
eads@18
|
181 |
eads@18
|
182 <dt>left:</dt> |
eads@18
|
183 <dd>'auto'</dd> |
eads@18
|
184 |
eads@18
|
185 <dt>width:</dt> |
eads@18
|
186 <dd>'auto'</dd> |
eads@18
|
187 |
eads@18
|
188 <dt>height:</dt> |
eads@18
|
189 <dd>'auto'</dd> |
eads@18
|
190 |
eads@18
|
191 <dt>opacity:</dt> |
eads@18
|
192 <dd>false</dd> |
eads@18
|
193 </dl> |
eads@18
|
194 </div> |
eads@18
|
195 </div> |
eads@18
|
196 </body> |
eads@18
|
197 </html> |