3
3
< title > BasicMouseInterfaceTest</ title >
4
4
5
5
< style >
6
- div .solidborder { border-style : solid; border-width : 1px ;}
6
+ div .solidborder { border-style : solid; border-width : 1px ; margin : 10 px ; }
7
7
# draggable { width : 60px ; height : 60px ; padding : 0.5em ; margin : 10px ; }
8
8
# droppable { width : 75px ; height : 75px ; padding : 0.5em ; margin : 10px ; }
9
9
</ style >
10
10
11
- < link type ="text/css " href ="css/ui-lightness/jquery-ui-1.12.1.min.css " rel ="stylesheet " />
12
- < script type ="text/javascript " src ="js/jquery-3.5.1.min.js "> </ script >
13
- < script type ="text/javascript " src ="js/jquery-ui-1.12.1.min.js "> </ script >
11
+ < link type ="text/css " href ="https://selenium.dev/selenium/web/ css/ui-lightness/jquery-ui-1.12.1.min.css " rel ="stylesheet " />
12
+ < script type ="text/javascript " src ="https://selenium.dev/selenium/web/ js/jquery-3.5.1.min.js "> </ script >
13
+ < script type ="text/javascript " src ="https://selenium.dev/selenium/web/ js/jquery-ui-1.12.1.min.js "> </ script >
14
14
< script type ="text/javascript ">
15
15
jQuery ( document ) . ready ( function ( ) {
16
- $ ( '#mousetracker ' ) . mousemove ( function ( e ) {
16
+ $ ( '#mouse-tracker ' ) . mousemove ( function ( e ) {
17
17
xPos = e . pageX - this . offsetLeft ;
18
18
yPos = e . pageY - this . offsetTop ;
19
- $ ( '#status ' ) . html ( xPos + ', ' + yPos ) ;
19
+ $ ( '#relative-location ' ) . html ( xPos + ', ' + yPos ) ;
20
20
} ) ;
21
21
} )
22
22
29
29
document . getElementById ( 'move-status' ) . innerHTML = message ;
30
30
}
31
31
function dropStatus ( message ) {
32
- document . getElementById ( 'drop-status' ) . innerHTML = message ;
32
+ document . getElementById ( 'drop-status' ) . innerHTML = message ;
33
33
}
34
+ function relativeStatus ( message ) {
35
+ document . getElementById ( 'relative-location' ) . innerHTML = message ;
36
+ }
37
+ function absoluteStatus ( message ) {
38
+ document . getElementById ( 'absolute-location' ) . innerHTML = message ;
39
+ }
40
+ function tellPos ( p ) {
41
+ document . getElementById ( 'absolute-location' ) . innerHTML = p . pageX + ', ' + p . pageY ;
42
+ }
43
+ function clearAbsolute ( p ) {
44
+ document . getElementById ( 'absolute-location' ) . innerHTML = '' ;
45
+ }
46
+ addEventListener ( 'mousemove' , tellPos , false ) ;
47
+ document . documentElement . addEventListener ( 'mouseleave' , clearAbsolute , false ) ;
34
48
</ script >
35
49
< script type ="text/javascript ">
36
50
$ ( function ( ) {
37
51
$ ( "#draggable" ) . draggable ( ) ;
38
52
$ ( "#droppable" ) . droppable ( {
39
- drop : function ( event , ui ) { dropStatus ( "Dropped! " ) }
53
+ drop : function ( event , ui ) { dropStatus ( "dropped " ) }
40
54
} ) ;
41
55
} ) ;
42
56
</ script >
@@ -48,33 +62,33 @@ <h2>Mouse Clicks</h2>
48
62
< p > < a href ="resultPage.html " id ="click "> Click for Results Page</ a > </ p >
49
63
50
64
< div >
51
- < input type ="text " id ="presses "
52
- onfocus ="clickStatus('focus ') "
53
- oncontextmenu ="clickStatus('contextClick ') "
54
- ondblclick ="clickStatus('doubleClick ') "
55
- placeholder ="Click "/>
65
+ < input type ="text " id ="clickable "
66
+ onfocus ="clickStatus('focused ') "
67
+ oncontextmenu ="clickStatus('context-clicked ') "
68
+ ondblclick ="clickStatus('double-clicked ') "
69
+ placeholder ="Clickable "/>
56
70
57
71
< strong id ="click-status "> </ strong >
58
72
</ div >
59
73
60
74
< h2 > Drag & Drop</ h2 >
61
75
62
76
< strong id ="drop-status "> </ strong >
63
- < div id ="draggable " class ="ui-widget-content "> Drag this </ div >
77
+ < div id ="draggable " class ="ui-widget-content "> Draggable </ div >
64
78
65
- < div id ="droppable " class ="ui-widget-header "> Drop here </ div >
79
+ < div id ="droppable " class ="ui-widget-header "> Droppable </ div >
66
80
67
81
< h2 > Mouse Position</ h2 >
68
82
69
83
< div >
70
- < input type ="button " id ="hover " onmouseleave ="moveStatus('') " onmouseover ="moveStatus('hovered') " value ="Hover "/>
71
- < strong id ="move-status "> </ strong >
84
+ < input type ="button " id ="hover " onmouseleave ="moveStatus('') " onmouseover ="moveStatus('hovered') " value ="Hoverable "/>
85
+ < strong id ="move-status ">  </ strong >
72
86
</ div >
73
87
74
- < p > < strong id ="status "> 0, 0</ strong > </ p >
75
- < div id ="mousetracker " class ="solidborder " style ="position: absolute; height: 200px; width: 200px; ">
88
+ < p > < strong > Absolute Location: < span id ="absolute-location " onmouseleave ="absoluteStatus('') "> </ span > </ strong > </ p >
89
+ < p > < strong > Relative Location in Box: < span id ="relative-location "> </ span > </ strong > </ p >
90
+ < div id ="mouse-tracker " onmouseleave ="relativeStatus('') " class ="solidborder " style ="position: absolute; height: 200px; width: 200px; ">
76
91
Move mouse here.
77
92
</ div >
78
-
79
93
</ body >
80
94
</ html >
0 commit comments