5 <title>Position Visual Test: Feedback</title>
6 <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
7 <script src="../../../jquery-1.9.1.js"></script>
8 <script src="../../../ui/jquery.ui.core.js"></script>
9 <script src="../../../ui/jquery.ui.widget.js"></script>
10 <script src="../../../ui/jquery.ui.position.js"></script>
11 <script src="../../../ui/jquery.ui.menu.js"></script>
14 function using( position, feedback ) {
17 .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
18 .removeClass( "left right top bottom center middle vertical horizontal" )
19 .addClass( feedback.horizontal )
20 .addClass( feedback.vertical )
21 .addClass( feedback.important );
24 var element = $( ".element" ),
25 target = $( "#target" ).position({
30 targetOffset = target.offset(),
31 oppositeElement = element.clone().width( 50 ).appendTo( "body" ),
32 leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ),
33 rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" );
48 ], function( index, direction ) {
49 element.clone().insertAfter( target ).position({
58 function positionWithOffset( horizontal, vertical ) {
61 at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
62 "top" + (vertical < 0 ? vertical : "+" + vertical),
67 $( document ).on( "mousemove", function( event ) {
68 element.position( positionWithOffset(
69 event.pageX - targetOffset.left, event.pageY - targetOffset.top ) );
70 oppositeElement.position( positionWithOffset(
71 -1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) );
72 leftElement.position( positionWithOffset(
73 -0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) );
74 rightElement.position( positionWithOffset(
75 0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
82 border: 1px solid black;
125 .right.horizontal:before {
130 .bottom.horizontal:before {
134 .top.horizontal:before {
141 <div id="target">all around me</div>
142 <div class="element"></div>