-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>Position Visual Test: Default</title>
- <link rel="stylesheet" href="../visual.css" type="text/css" />
- <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
- <script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript">
+ <link rel="stylesheet" href="../visual.css">
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.7.2.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)
+ $( this )
.css( position )
.text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
.removeClass( "left right top bottom center middle vertical horizontal" )
.addClass( feedback.vertical )
.addClass( feedback.important );
}
- var target = $("#target").position({
- my: "center",
- at: "center",
- of: window
- });
- var element = $(".element");
+
+ 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",
"left-75 center",
"left-75 top",
"left-25 top-50"
- ], function(index, direction) {
- element.clone().insertAfter(target).position({
+ ], function( index, direction ) {
+ element.clone().insertAfter( target ).position({
my: "center",
at: direction,
of: target,
using: using
- })
+ });
});
- var targetOffset = target.offset();
- var oppositeElement = element.clone().width(50).appendTo('body');
- var leftElement = element.clone().width(50).height(150).appendTo('body');
- var rightElement = element.clone().height(150).width(150).appendTo('body');
- element.width(150);
- $(document).on( "mousemove", function(event) {
+ element.width( 150 );
+ $( document ).on( "mousemove", function( event ) {
var base = {
my: "left top",
at: "left top",
of: target,
using: using
- }
+ };
element.position( $.extend({
offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top)
- }, base));
+ }, base ));
oppositeElement.position( $.extend({
offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top))
- }, base));
+ }, base ));
leftElement.position( $.extend({
offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top))
- }, base));
+ }, base ));
rightElement.position( $.extend({
offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top))
- }, base));
+ }, base) );
});
});
</script>
<style>
- #target, .element {
- position: absolute;
- border: 1px solid black;
- border-radius: 5px;
- width: 75px;
- height: 25px;
- padding: 5px;
- }
- #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;
- }
+ #target, .element {
+ position: absolute;
+ border: 1px solid black;
+ border-radius: 5px;
+ width: 75px;
+ height: 25px;
+ padding: 5px;
+ }
+ #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>
+<div id="target">all around me</div>
+<div class="element"></div>
</body>
</html>
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>Position Visual Test: Default</title>
- <link rel="stylesheet" href="../visual.css" type="text/css" />
- <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
- <script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript">
+ <link rel="stylesheet" href="../visual.css">
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.7.2.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 ) {
- var angleRad = Math.atan2( feedback.target.top + feedback.target.height / 2 - feedback.element.top - feedback.element.height / 2, feedback.target.left + feedback.target.width / 2 - feedback.element.left - feedback.element.width / 2 ) * 180 / Math.PI;
- var angle = (Math.round( angleRad * 100) / 100 );
- $(this)
- .offset( position )
+ var angleRad = Math.atan2(
+ feedback.target.top + feedback.target.height / 2 - feedback.element.top - feedback.element.height / 2,
+ feedback.target.left + feedback.target.width / 2 - feedback.element.left - feedback.element.width / 2
+ ) * 180 / Math.PI,
+ angle = Math.round( angleRad * 100) / 100;
+ $( this )
+ .css( position )
.text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important + " " + angle + "°" )
.css({
"-webkit-transform": "rotate(" + angle + "deg)",
"transform": "rotate(" + angle + "deg)"
});
}
- var target = $("#target").position({
- my: "center",
- at: "center",
- of: window
- });
- var element = $(".element");
+
+ 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",
"left-75 center",
"left-75 top",
"left-25 top-50"
- ], function(index, direction) {
- element.clone().insertAfter(target).position({
+ ], function( index, direction ) {
+ element.clone().insertAfter( target ).position({
my: "center",
at: direction,
of: target,
using: using
- })
+ });
});
- var targetOffset = target.offset();
- var oppositeElement = element.clone().width(50).appendTo('body');
- var leftElement = element.clone().width(50).height(150).appendTo('body');
- var rightElement = element.clone().height(150).width(150).appendTo('body');
- element.width(150);
- $(document).on( "mousemove", function(event) {
+ element.width( 150 );
+ $( document ).on( "mousemove", function( event ) {
var base = {
my: "left top",
at: "left top",
of: target,
using: using
- }
+ };
element.position( $.extend({
offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top)
- }, base));
+ }, base ));
oppositeElement.position( $.extend({
offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top))
- }, base));
+ }, base ));
leftElement.position( $.extend({
offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top))
- }, base));
+ }, base ));
rightElement.position( $.extend({
offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top))
- }, base));
+ }, base ));
});
});
</script>
<style>
- #target, .element {
- position: absolute;
- border: 1px solid black;
- border-radius: 5px;
- width: 75px;
- height: 25px;
- padding: 5px;
- }
- #target {
- height: 75px;
- }
+ #target, .element {
+ position: absolute;
+ border: 1px solid black;
+ border-radius: 5px;
+ width: 75px;
+ height: 25px;
+ padding: 5px;
+ }
+ #target {
+ height: 75px;
+ }
</style>
</head>
<body>
- <div id="target">all around me</div>
-
- <div class="element"></div>
+<div id="target">all around me</div>
+<div class="element"></div>
</body>
</html>
projects / jquery-ui.git / commitdiff