test-div-coord.html

   1 <html>
   2 <head>
   3 <script type="text/javascript" src="commons.js"></script>
   4 <script type="text/javascript" src="xynt-console.js"></script>
   5 <script type="text/javascript" src="xynt-dd.js"></script>
   6 <script type="text/javascript" src="xynt-link.js"></script>
   7 <script type="text/javascript">
   8
   9 function resize()
  10 {
  11     //var w = getStyle(window.document.body, "width", "width");
  12     //var h = getStyle(window.document.body, "height", "height");
  13     var w = window.innerWidth;
  14     var h = window.innerHeight;
  15
  16     console.log("W: "+w+" H: "+h);
  17
  18     $('board').style.left    =  (parseInt(w) / 2 - 2 + 2)+"px";
  19     $('board').style.top     =  "0px";
  20     $('board').style.width   =  (parseInt(w) / 2 - 2)+"px";
  21     $('board').style.height  =  (parseInt(h) - 2)+"px";
  22     $('board2').style.top    =  "0px";
  23     $('board2').style.left   =  "0px";
  24     $('board2').style.width  =  (parseInt(w) / 2 - 2)+"px";
  25     $('board2').style.height =  (parseInt(h) - 2)+"px";
  26
  27     var h1 = $('board').clientHeight;
  28     var h2 = $('board2').clientHeight;
  29
  30     if (h1 > h2) {
  31         $('board').style.height = h2+"px";
  32     }
  33     else if (h2 > h1) {
  34         $('board2').style.height = h1+"px";
  35     }
  36
  37     console.log($('board').scrollTop);
  38     $('board2-sub').scrollTop = $('board').scrollTop;
  39 }
  40
  41 function scroll() {
  42     console.log("scroll");
  43     $('board2-sub').style.top = -parseInt($('board').scrollTop)+"px";
  44 }
  45
  46 function scroll2() {
  47     console.log("scroll2:");
  48 }
  49
  50 window.onload = function () {
  51     resize();
  52     return;
  53
  54     // window.setTimeout(exchange, 2000);
  55
  56     Drag.call($('t1'), dropr1, -1600, 1600, 10,10);
  57     Drag.call($('t2'), dropr2, -1600, 1600, 10,10);
  58     Drag.call($('t3'), dropr1, -1600, 1600, 10,10);
  59     Drag.call($('t4'), dropr2, -1600, 1600, 10,10);
  60
  61     Drag.call($('r1'), dropr1, 0,0, -900,900);
  62     Drag.call($('r2'), dropr2, 0,0, -900,900);
  63     Drag.call($('r3'), dropr3, 0,0, -900,900);
  64     Drag.call($('r4'), dropr4, 0,0, -900,900);
  65
  66     l = new tasks_link($('board'), $('t1'), $('t2'), "ss");
  67     l = new tasks_link($('board'), $('t3'), $('t4'), "ss");
  68
  69 }
  70 </script>
  71
  72 </head>
  73 <body style="margin: 0px; padding: 0px;">
  74 <!-- task:begin -->
  75
  76 <div  id="board2" style="width: 10%; height: 10%; background-color: #f0f0f0; border: 1px solid black; position: absolute; overflow-y: hidden; overflow-x: scroll;" onclick="resize();" onscroll="scroll2('scroll');">
  77 <div id="board2-sub" style="width: 10%; height: 10%; background-color: #f0f0f0; border: 0px solid black; position: absolute;" onclick="resize();" onscroll="scroll2('scroll');">
  78 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>
  79 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
  80 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>
  81 </div>
  82 </div>
  83
  84 <div id="board" style="width: 10%; height: 10%; background-color: #f0f0f0; border: 1px solid black; overflow-y: scroll; position: absolute;" onclick="resize();" onscroll="scroll('scroll');">
  85 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>
  86 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
  87 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>
  88 </div>
  89
  90 </body>
  91 </html>