web/test-div-coord.html

   1 <html>
   2 <head>
   3 <script type="text/javascript" src="xynt/xynt-commons.js"></script>
   4 <script type="text/javascript" src="xynt/xynt-base.js"></script>
   5 <script type="text/javascript" src="xynt/xynt-console.js"></script>
   6 <script type="text/javascript" src="xynt/xynt-connect.js"></script>
   7 <script type="text/javascript" src="xynt/xynt-dd.js"></script>
   8 <script type="text/javascript" src="xynt/xynt-link.js"></script>
   9 <script type="text/javascript" src="xynt-div-coord-test.js"></script>
  10
  11 </head>
  12 <body style="margin: 0px; padding: 0px;">
  13 <!-- task:begin -->
  14 <div style="width: 100%; height: 100%;">
  15 <div  id="board" style="width: 10%; height: 10%; background-color: #f0f0f0; border: 1px solid #a0a0a0; position: absolute; overflow-y: scroll; overflow-x: scroll;" onclick="resize();" onscroll="scroll2('scroll');">
  16 aa1<br>aa2<br>aa3<br>aa4<br>aa5<br>aa6<br>aa7<br>aa8<br>aa9<br>aaA<br>aaB<br>aaC<br>aaD<br>aaE<br>aaF<br>aa0<br>
  17 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
  18 bb1<br>bb2<br>bb3<br>bb4<br>bb5<br>bb6<br>bb7<br>bb8<br>bb9<br>bbA<br>bbB<br>bbC<br>bbD<br>bbE<br>bbF<br>bb0<br>
  19 </div>
  20
  21 <div id="board-drag" style="cursor: ew-resize; width: 6px; height: 100%; background-color: #e0e0e0; border: 1px solid #a0a0a0; position: absolute;">
  22 <div style="position: absolute; top: 50%;">
  23 <img src="img/resize-ew.png" style="position: absolute; top: -23px; border: 0px solid red;">
  24 </div>
  25 </div>
  26
  27 <div id="board2" style="width: 10%; height: 10%; background-color: #f0f0f0; border: 1px solid #a0a0a0; overflow-y: scroll; position: absolute;" onclick="resize();" onscroll="scroll('scroll');">
  28 aa1<br>aa2<br>aa3<br>aa4<br>aa5<br>aa6<br>aa7<br>aa8<br>aa9<br>aaA<br>aaB<br>aaC<br>aaD<br>aaE<br>aaF<br>aa0<br>
  29 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
  30 bb1<br>bb2<br>bb3<br>bb4<br>bb5<br>bb6<br>bb7<br>bb8<br>bb9<br>bbA<br>bbB<br>bbC<br>bbD<br>bbE<br>bbF<br>bb0<br>
  31 </div>
  32 </div>
  33 </body>
  34 </html>