annotate js/bt/other_libs/bgiframe_2.1.1/test/index.html @ 19:d83073a08b25

Added beautytips, and advanced library behavior to the library prototype.
author David Eads <eads@chicagotech.org>
date Fri, 06 Mar 2009 14:26:06 -0600
parents 0d557e6e73f7
children
rev   line source
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>