AproJo

 view release on metacpan or  search on metacpan

share/files/public/skins/default/jquery-ui-1.9.1.custom/development-bundle/docs/position.html  view on Meta::CPAN

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI position documentation</title>

	<style>
	body {
		font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
	}
	.gutter {
		display: none;
	}
	</style>
</head>
<body>

<script>{
		"title":
			".position()",
		"excerpt":
			"Position an element relative to another.",
		"termSlugs": {
			"category": [
				"methods","overrides","utilities"
			]
		}
	}</script><article id="position1" class="entry method"><h2 class="section-title">
<span class="name">.position( options )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span><span class="version-details">version added: 1.8</span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>Description: </strong>Position an element relative to another.</p>
<ul class="signatures"><li class="signature" id="position-options">
<h4 class="name">.position( options )</h4>
<ul><li>
<div><strong>options</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div>
<strong>my</strong> (default: <code>"center"</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
</div>
<div>Defines which position <strong>on the element being positioned</strong> to align with the target element: "horizontal vertical" alignment. A single value such as <code>"right"</code> will be normalized to <code>"right center"</code>, <code>"top"...
</li>
<li>
<div>
<strong>at</strong> (default: <code>"center"</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
</div>
<div>Defines which position <strong>on the target element</strong> to align the positioned element against: "horizontal vertical" alignment. See the <a href="#option-my"><code>my</code></a> option for full details on possible values. Perecentage offs...
</li>
<li>
<div>
<strong>of</strong> (default: <code>null</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types#Element">Element</a> or <a href="http://api.jquery.com/Types#jQuery">jQuery</a> or <a href="http://api.jquery.com/Types#Event">Event</a>
</div>
<div>Which element to position against. If you provide a selector or jQuery object, the first matching element will be used. If you provide an event object, the <code>pageX</code> and <code>pageY</code> properties will be used. Example: <code>"#top-m...
</div>
</li>
<li>
<div>
<strong>collision</strong> (default: <code>"flip"</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
</div>
<div>
					<p>When the positioned element overflows the window in some direction, move it to an alternative position. Similar to <a href="#option-my"><code>my</code></a> and <a href="#option-at"><code>at</code></a>, this accepts a single value or a pair fo...
					<ul>
						<li>
<code>"flip"</code>: Flips the element to the opposite side of the target and the collision detection is run again to see if it will fit. Whichever side allows more of the element to be visible will be used.</li>
						<li>
<code>"fit"</code>: Shift the element away from the edge of the window.</li>
						<li>
<code>"flipfit"</code>: First applies the flip logic, placing the element on whichever side allows more of the element to be visible. Then the fit logic is applied to ensure as much of the element is visible as possible.</li>
						<li>
<code>"none"</code>: Does not apply any collision detection.</li>
					</ul>
				</div>
</li>
<li>
<div>
<strong>using</strong> (default: <code>null</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
<div>
					When specified, the actual property setting is delegated to this callback. Receives two parameters: The first is a hash of <code>top</code> and <code>left</code> values for the position that should be set and can be forwarded to <code>.position(...
					<p>The second provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. Both <code>target</code> and <code>element</code> have these properties: <code>element</code>, <code>left</co...
				</div>
</li>
<li>
<div>
<strong>within</strong> (default: <code>window</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types#Element">Element</a> or <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
</div>
<div>Element to position within, affecting collision detection. If you provide a selector or jQuery object, the first matching element will be used.</div>
</li>
</ul>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
		<p>The jQuery UI <code>.position()</code> method allows you to position an element relative to the window, document, another element, or the cursor/mouse, without worrying about offset parents.</p>
		<p><em>Note: jQuery UI does not support positioning hidden elements.</em></p>
		<p>This is a standalone jQuery plugin and has no dependencies on other jQuery UI components.</p>
		<p>This plugin extends jQuery's built-in <a href="http://api.jquery.com/position"><code>.position()</code></a> method. If jQuery UI is not loaded, calling the <code>.position()</code> method may not fail directly, as the method still exists. Howeve...
	</div>



( run in 3.160 seconds using v1.01-cache-2.11-cpan-5837b0d9d2c )