visual/position/position_feedback.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Position Visual Test: Feedback</title>
        <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
        <script src="../../../jquery-1.9.1.js"></script>
        <script src="../../../ui/jquery.ui.core.js"></script>
        <script src="../../../ui/jquery.ui.widget.js"></script>
        <script src="../../../ui/jquery.ui.position.js"></script>
        <script src="../../../ui/jquery.ui.menu.js"></script>
        <script>
        $(function() {
                function using( position, feedback ) {
                        $( this )
                                .css( position )
                                .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
                                .removeClass( "left right top bottom center middle vertical horizontal" )
                                .addClass( feedback.horizontal )
                                .addClass( feedback.vertical )
                                .addClass( feedback.important );
                }

                var element = $( ".element" ),
                        target = $( "#target" ).position({
                                my: "center",
                                at: "center",
                                of: window
                        }),
                        targetOffset = target.offset(),
                        oppositeElement = element.clone().width( 50 ).appendTo( "body" ),
                        leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ),
                        rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" );

                $.each([
                        "center top-100",
                        "right+25 top-50",
                        "right+75 top",
                        "right+75 center",
                        "right+75 bottom",
                        "right+25 bottom+50",
                        "center bottom+100",
                        "left-25 bottom+50",
                        "left-75 bottom",
                        "left-75 center",
                        "left-75 top",
                        "left-25 top-50"
                ], function( index, direction ) {
                        element.clone().insertAfter( target ).position({
                                my: "center",
                                at: direction,
                                of: target,
                                using: using
                        });
                });

                element.width( 150 );
                function positionWithOffset( horizontal, vertical ) {
                        return {
                                my: "left top",
                                at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
                                        "top" + (vertical < 0 ? vertical : "+" + vertical),
                                of: target,
                                using: using
                        };
                };
                $( document ).on( "mousemove", function( event ) {
                        element.position( positionWithOffset(
                                event.pageX - targetOffset.left, event.pageY - targetOffset.top ) );
                        oppositeElement.position( positionWithOffset(
                                -1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) );
                        leftElement.position( positionWithOffset(
                                -0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) );
                        rightElement.position( positionWithOffset(
                                0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
                });
        });
        </script>
        <style>
        #target, .element {
                position: absolute;
                border: 1px solid black;
                border-radius: 5px;
                width: 75px;
                height: 25px;
                padding: 5px;
                font-size: 62.5%;
        }
        #target {
                height: 75px;
        }
        .element:before {
                font-size: 12pt;
                content: "↑";
                position: absolute;
                top: -19px;
                left: 5px;
        }
        .right:before {
                left: auto;
                right: 5px;
        }
        .bottom:before {
                content: "↓";
                top: auto;
                bottom: -19px;
        }
        .center:before {
                left: 50%;
                right: auto;
        }
        .middle:before {
                top: 50%;
                bottom: auto;
        }
        .horizontal:before {
                height: 10px;
                top: 50%;
                margin-top: -8px;
                bottom: auto;
                left: -18px;
                right: auto;
                content: "←";
        }
        .right.horizontal:before {
                left: auto;
                right: -18px;
                content: "→";
        }
        .bottom.horizontal:before {
                top: auto;
                bottom: 5px;
        }
        .top.horizontal:before {
                top: 5px;
        }
        </style>
</head>
<body>

<div id="target">all around me</div>
<div class="element"></div>

</body>
</html>
1	<!doctype html>
2	<html lang="en">
3	<head>
4	<meta charset="utf-8">
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>
12	<script>
13	$(function() {
14	function using( position, feedback ) {
15	$( this )
16	.css( position )
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 );
22	}
23
24	var element = $( ".element" ),
25	target = $( "#target" ).position({
26	my: "center",
27	at: "center",
28	of: window
29	}),
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" );
34
35	$.each([
36	"center top-100",
37	"right+25 top-50",
38	"right+75 top",
39	"right+75 center",
40	"right+75 bottom",
41	"right+25 bottom+50",
42	"center bottom+100",
43	"left-25 bottom+50",
44	"left-75 bottom",
45	"left-75 center",
46	"left-75 top",
47	"left-25 top-50"
48	], function( index, direction ) {
49	element.clone().insertAfter( target ).position({
50	my: "center",
51	at: direction,
52	of: target,
53	using: using
54	});
55	});
56
57	element.width( 150 );
58	function positionWithOffset( horizontal, vertical ) {
59	return {
60	my: "left top",
61	at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
62	"top" + (vertical < 0 ? vertical : "+" + vertical),
63	of: target,
64	using: using
65	};
66	};
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) ) );
76	});
77	});
78	</script>
79	<style>
80	#target, .element {
81	position: absolute;
82	border: 1px solid black;
83	border-radius: 5px;
84	width: 75px;
85	height: 25px;
86	padding: 5px;
87	font-size: 62.5%;
88	}
89	#target {
90	height: 75px;
91	}
92	.element:before {
93	font-size: 12pt;
94	content: "↑";
95	position: absolute;
96	top: -19px;
97	left: 5px;
98	}
99	.right:before {
100	left: auto;
101	right: 5px;
102	}
103	.bottom:before {
104	content: "↓";
105	top: auto;
106	bottom: -19px;
107	}
108	.center:before {
109	left: 50%;
110	right: auto;
111	}
112	.middle:before {
113	top: 50%;
114	bottom: auto;
115	}
116	.horizontal:before {
117	height: 10px;
118	top: 50%;
119	margin-top: -8px;
120	bottom: auto;
121	left: -18px;
122	right: auto;
123	content: "←";
124	}
125	.right.horizontal:before {
126	left: auto;
127	right: -18px;
128	content: "→";
129	}
130	.bottom.horizontal:before {
131	top: auto;
132	bottom: 5px;
133	}
134	.top.horizontal:before {
135	top: 5px;
136	}
137	</style>
138	</head>
139	<body>
140
141	<div id="target">all around me</div>
142	<div class="element"></div>
143
144	</body>
145	</html>