Ticket #4166: testResizeJump.htm

File testResizeJump.htm, 2.9 KB (added by pbue, 11 years ago)
Line 
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
4<title>Test possible  Resize Jump Issue</title>
5
6
7        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
8       
9        <script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/master/ui/jquery.ui.core.js"></script>
10        <script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/master/ui/jquery.ui.widget.js"></script>
11        <script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/master/ui/jquery.ui.mouse.js"></script>
12        <script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/master/ui/jquery.ui.draggable.js"></script>
13        <script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/master/ui/jquery.ui.resizable.js"></script>
14       
15        <!-- script type="text/javascript" src="js/jquery-ui-1.8.5.js" -->
16
17
18        <link rel="stylesheet" type="text/css" href="themes/base/jquery.ui.all.css"/>
19       
20       
21        <style type="text/css">
22            .box {
23                width: 180px; 
24                height: 180px; 
25                border-style: dotted; 
26                border-width: 1px;
27                position: absolute;
28            }
29            #testpane1 {
30                width: 500px;
31                height: 300px;
32                border: 1px solid;
33                position: absolute;
34                left: 40px;
35                top: 40px;
36                overflow: scroll;
37            }
38            #testpane2 {
39                width: 600px;
40                height: 300px;
41                border: 1px solid;
42                position: absolute;
43                left: 35px;
44                top: 35px;
45                overflow: scroll;
46            }
47            #tester {
48                background-color: red;
49                position: absolute;
50                left: 35px;
51                top: 350px;
52                width: 60px;
53            }
54            #forcer{
55                position: absolute;
56                left: 800px;
57                top: 900px;
58            }
59        </style>
60
61        <script type="text/javascript">
62                $(document).ready(function () {
63                       
64               
65                        $("#box1").draggable();
66                        $("#box2").resizable();
67                        $("#box2").draggable();
68
69
70                        testOther();
71                       
72                });
73
74
75                function writeLog()
76                {
77                        if (typeof console != 'undefined' )
78                        {
79                                var posiy = $("#testpane1").css('position');
80                                //console.log(posiy);
81                               
82                                var scrolly1 = $("#testpane1").scrollTop();
83                                console.log("scroll 1: " + scrolly1);
84
85                                var scrolly2 = $("#testpane2").scrollTop();
86                                console.log("scroll 2: " + scrolly2);
87
88                                var scrollyD = $(document).scrollTop();
89                                console.log("scroll D: " + scrollyD);
90                               
91                                var elemPos = $("#box2").position().top;
92                                console.log("pos Y: " + elemPos);
93                               
94                        }
95                }
96               
97
98                function testOther()
99                {
100                        $("#tester").bind('click', function() {
101                                                                        writeLog();
102                                                          });
103                }
104               
105        </script>
106
107
108</head>
109<body>
110
111        <div id= testpane2>
112                <div id="testpane1">Center
113               
114                        <div id="box1" class="box">
115                                <span>I drag.</span>
116                        </div>
117                        <div id="box2" class="box">
118                                <span>I drag and size.</span>
119                        </div>
120               
121                </div>
122        </div>
123       
124        <div id="tester" >Tester</div>
125        <div id="forcer">force Document scroll</div>
126       
127</body>
128</html>