jquery-ui/demos/position/default.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Position - Default functionality</title>
	<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.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#parent {
		width: 60%;
		height: 40px;
		margin: 10px auto;
		padding: 5px;
		border: 1px solid #777;
		background-color: #fbca93;
		text-align: center;
	}
	.positionable {
		position: absolute;
		display: block;
		right: 0;
		bottom: 0;
		background-color: #bcd5e6;
		text-align: center;
	}
	#positionable1 {
		width: 75px;
		height: 75px;
	}
	#positionable2 {
		width: 120px;
		height: 40px;
	}
	.ui-flipped-top {
		border-top: 3px solid #000000;
	}
	.ui-flipped-bottom {
		border-bottom: 3px solid #000000;
	}
	.ui-flipped-left {
		border-left: 3px solid #000000;
	}
	.ui-flipped-right {
		border-right: 3px solid #000000;
	}
	select, input {
		margin-left: 15px;
	}
	</style>
	<script>
	$(function() {
		function position( using ) {
			$( ".positionable" ).position({
				of: $( "#parent" ),
				my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
				at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
				offset: $( "#offset" ).val(),
				using: using,
				collision: $( "#collision_horizontal" ).val() + ' ' + $( "#collision_vertical" ).val()
			});
		}

		$( ".positionable" ).css( "opacity", 0.5 );

		$( ":input" ).bind( "click keyup change", function() { position(); });

		$( "#parent" ).draggable({
			drag: function() { position(); }
		});

		$( ".positionable" ).draggable({
			drag: function( event, ui ) {
				// reset offset before calculating it
				$( "#offset" ).val( "0" );
				position(function( result ) {
					$( "#offset" ).val( "" + ( ui.offset.left - result.left ) +
						" " + ( ui.offset.top - result.top ) );
					position();
				});
			}
		});

		position();
	});
	</script>
</head>
<body>

<div class="demo">

<div id="parent">
	<p>
	This is the position parent element.
	</p>
</div>

<div class="positionable" id="positionable1">
	<p>
	to position
	</p>
</div>

<div class="positionable" id="positionable2">
	<p>
	to position 2
	</p>
</div>

<div style="padding: 20px; margin-top: 75px;">
	position...
	<div style="padding-bottom: 20px;">
		<b>my:</b>
		<select id="my_horizontal">
			<option value="left">left</option>
			<option value="center">center</option>
			<option value="right">right</option>
		</select>
		<select id="my_vertical">
			<option value="top">top</option>
			<option value="middle">center</option>
			<option value="bottom">bottom</option>
		</select>
	</div>
	<div style="padding-bottom: 20px;">
		<b>at:</b>
		<select id="at_horizontal">
			<option value="left">left</option>
			<option value="center">center</option>
			<option value="right">right</option>
		</select>
		<select id="at_vertical">
			<option value="top">top</option>
			<option value="middle">center</option>
			<option value="bottom">bottom</option>
		</select>
	</div>
	<div style="padding-bottom: 20px;">
		<b>offset:</b>
		<input id="offset" type="text" size="15"/>
	</div>
	<div style="padding-bottom: 20px;">
		<b>collision:</b>
		<select id="collision_horizontal">
			<option value="flip">flip</option>
			<option value="fit">fit</option>
			<option value="flipfit">flipfit</option>
			<option value="none">none</option>
		</select>
		<select id="collision_vertical">
			<option value="flip">flip</option>
			<option value="fit">fit</option>
			<option value="flipfit">flipfit</option>
			<option value="none">none</option>
		</select>
	</div>
</div>

</div><!-- End demo -->


<div class="demo-description">
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
<br/>Drag around the parent element to see collision detection in action.</p>
</div><!-- End demo-description -->

</body>
</html>
-												html pages: added HTML5 meta charset UTF-8 tag, changed DOCTYPE to uppercase

											
										
										
											2010-03-12 03:18:34 +00:00
+								<!DOCTYPE html>
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+								<html lang="en">
 								<head>
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
+									<meta charset="utf-8">
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+									<title>jQuery UI Position - Default functionality</title>
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
+									<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
-												Upgrade jQuery to 1.7.2.

											
										
										
											2012-03-22 13:45:22 +00:00
+									<script src="../../jquery-1.7.2.js"></script>
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
+									<script src="../../ui/jquery.ui.core.js"></script>
 									<script src="../../ui/jquery.ui.widget.js"></script>
 									<script src="../../ui/jquery.ui.mouse.js"></script>
 									<script src="../../ui/jquery.ui.draggable.js"></script>
 									<script src="../../ui/jquery.ui.position.js"></script>
 									<link rel="stylesheet" href="../demos.css">
 									<style>
-												Position: Cleanup up position demo CSS and add it to the within-visual-test

											
										
										
											2011-07-12 15:15:33 +00:00
+									#parent {
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+										width: 60%;
-												Position demo: Updated sizes of elements.

											
										
										
											2011-09-16 15:33:26 +00:00
+										height: 40px;
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+										margin: 10px auto;
 										padding: 5px;
 										border: 1px solid #777;
 										background-color: #fbca93;
 										text-align: center;
 									}
-												Position: Cleanup up position demo CSS and add it to the within-visual-test

											
										
										
											2011-07-12 15:15:33 +00:00
+									.positionable {
-												position: improved default demo to use position:absolute instead of fixed - with fixed, the positioned element doesn't move on scroll

											
										
										
											2009-08-16 09:09:48 +00:00
+										position: absolute;
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+										display: block;
 										right: 0;
 										bottom: 0;
 										background-color: #bcd5e6;
 										text-align: center;
 									}
-												Position demo: Updated sizes of elements.

											
										
										
											2011-09-16 15:33:26 +00:00
+									#positionable1 {
 										width: 75px;
 										height: 75px;
 									}
 									#positionable2 {
 										width: 120px;
 										height: 40px;
 									}
-												Position: Cleanup up position demo CSS and add it to the within-visual-test

											
										
										
											2011-07-12 15:15:33 +00:00
+									.ui-flipped-top {
-												Position: Add flip-classes. Fixes #5937 - Position: Add ability to determine if the element is flipped via css

											
										
										
											2011-07-11 23:49:56 +00:00
+										border-top: 3px solid #000000;
 									}
-												Position: Cleanup up position demo CSS and add it to the within-visual-test

											
										
										
											2011-07-12 15:15:33 +00:00
+									.ui-flipped-bottom {
-												Position: Add flip-classes. Fixes #5937 - Position: Add ability to determine if the element is flipped via css

											
										
										
											2011-07-11 23:49:56 +00:00
+										border-bottom: 3px solid #000000;
 									}
-												Position: Cleanup up position demo CSS and add it to the within-visual-test

											
										
										
											2011-07-12 15:15:33 +00:00
+									.ui-flipped-left {
-												Position: Add flip-classes. Fixes #5937 - Position: Add ability to determine if the element is flipped via css

											
										
										
											2011-07-11 23:49:56 +00:00
+										border-left: 3px solid #000000;
 									}
-												Position: Cleanup up position demo CSS and add it to the within-visual-test

											
										
										
											2011-07-12 15:15:33 +00:00
+									.ui-flipped-right {
-												Position: Add flip-classes. Fixes #5937 - Position: Add ability to determine if the element is flipped via css

											
										
										
											2011-07-11 23:49:56 +00:00
+										border-right: 3px solid #000000;
 									}
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+									select, input {
 										margin-left: 15px;
 									}
 									</style>
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
+									<script>
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+									$(function() {
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
+										function position( using ) {
 											$( ".positionable" ).position({
 												of: $( "#parent" ),
 												my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
 												at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
 												offset: $( "#offset" ).val(),
-												Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests).

											
										
										
											2010-01-07 03:19:50 +00:00
+												using: using,
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
+												collision: $( "#collision_horizontal" ).val() + ' ' + $( "#collision_vertical" ).val()
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+											});
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+										}
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
 										$( ".positionable" ).css( "opacity", 0.5 );
 										$( ":input" ).bind( "click keyup change", function() { position(); });
 										$( "#parent" ).draggable({
-												Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests).

											
										
										
											2010-01-07 03:19:50 +00:00
+											drag: function() { position(); }
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+										});
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
 										$( ".positionable" ).draggable({
 											drag: function( event, ui ) {
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+												// reset offset before calculating it
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
+												$( "#offset" ).val( "0" );
 												position(function( result ) {
 													$( "#offset" ).val( "" + ( ui.offset.left - result.left ) +
 														" " + ( ui.offset.top - result.top ) );
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+													position();
 												});
 											}
 										});
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+										position();
 									});
 									</script>
 								</head>
 								<body>
 								<div class="demo">
 								<div id="parent">
 									<p>
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+									This is the position parent element.
 									</p>
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+								</div>
-												Position demo: Updated sizes of elements.

											
										
										
											2011-09-16 15:33:26 +00:00
+								<div class="positionable" id="positionable1">
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+									<p>
 									to position
 									</p>
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+								</div>
-												Position demo: Updated sizes of elements.

											
										
										
											2011-09-16 15:33:26 +00:00
+								<div class="positionable" id="positionable2">
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+									<p>
 									to position 2
 									</p>
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+								</div>
 								<div style="padding: 20px; margin-top: 75px;">
 									position...
 									<div style="padding-bottom: 20px;">
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+										<b>my:</b>
 										<select id="my_horizontal">
 											<option value="left">left</option>
 											<option value="center">center</option>
 											<option value="right">right</option>
-												Position: Cleanup up position demo CSS and add it to the within-visual-test

											
										
										
											2011-07-12 15:15:33 +00:00
+										</select>
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+										<select id="my_vertical">
 											<option value="top">top</option>
 											<option value="middle">center</option>
 											<option value="bottom">bottom</option>
 										</select>
 									</div>
 									<div style="padding-bottom: 20px;">
 										<b>at:</b>
 										<select id="at_horizontal">
 											<option value="left">left</option>
 											<option value="center">center</option>
 											<option value="right">right</option>
 										</select>
 										<select id="at_vertical">
 											<option value="top">top</option>
 											<option value="middle">center</option>
 											<option value="bottom">bottom</option>
 										</select>
 									</div>
 									<div style="padding-bottom: 20px;">
 										<b>offset:</b>
 										<input id="offset" type="text" size="15"/>
 									</div>
 									<div style="padding-bottom: 20px;">
 										<b>collision:</b>
 										<select id="collision_horizontal">
 											<option value="flip">flip</option>
 											<option value="fit">fit</option>
-												Position: Added better collision detection for flip and fit, added visual tests for each and updated the unit tests to take the changes into account. In the process, I removed the rounding that was being done to the position since older jQuery couldn't handle the fractions. There was another pull for this same issue and I have merged the unit tests from that pull into this commit. Also added flipfit!

											
										
										
											2011-08-13 03:19:52 +00:00
+											<option value="flipfit">flipfit</option>
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+											<option value="none">none</option>
 										</select>
 										<select id="collision_vertical">
 											<option value="flip">flip</option>
 											<option value="fit">fit</option>
-												Position: Added better collision detection for flip and fit, added visual tests for each and updated the unit tests to take the changes into account. In the process, I removed the rounding that was being done to the position since older jQuery couldn't handle the fractions. There was another pull for this same issue and I have merged the unit tests from that pull into this commit. Also added flipfit!

											
										
										
											2011-08-13 03:19:52 +00:00
+											<option value="flipfit">flipfit</option>
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+											<option value="none">none</option>
 										</select>
 									</div>
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+								</div>
-												position demo - fixed html validation issue. Hopefully will fix #5358 - Position Demo is borked

											
										
										
											2010-03-17 19:22:05 +00:00
+								</div><!-- End demo -->
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
-												Position demos: Coding standards.

											
										
										
											2010-09-10 14:24:33 +00:00
 								<div class="demo-description">
-												Copied position plugin from /branches/dev/positionTo r2971.

											
										
										
											2009-07-24 18:24:13 +00:00
+								<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
 								<br/>Drag around the parent element to see collision detection in action.</p>
 								</div><!-- End demo-description -->
 								</body>
 								</html>