jquery-ui/tests/visual/position/position.html

<!DOCTYPE html>
<html lang="en">
<head>
	<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">
	$(function() {
		var inputs = $("input");
		$("ul").insertAfter(inputs);
		$(window).resize(function() {
			inputs.each(function() {
				var input = $(this).position({
					my: this.id.replace(/-/, " "),
					at: this.id.replace(/-/, " "),
					of: "#container",
					collision: "none"
				});
				var menu = $(this).next().menu()
				menu.position({
					my: "left+30 top+20",
					at: "left bottom",
					of: this,
					using: function( position, feedback ) {
						input.val(feedback.horizontal + " " + feedback.vertical)
						$(this).offset( position );
						$(this)
							.removeClass("left right top bottom center middle")
							.addClass(feedback.horizontal)
							.addClass(feedback.vertical);
					}
				});
			});
		}).resize();
	});
	</script>
	<style>
		input, .ui-menu { position: absolute; }
		.ui-menu { width: 200px; }
		html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
		#container { width: 95%; height: 95%; border: 1px solid black; margin: auto; }
		.ui-menu:before {
			font-size: 12pt;
			content: "↑";
			position: absolute;
			top: -22px;
			left: 5px;
		}
		.right:before {
			left: auto;
			right: 5px;
		}
		.bottom:before {
			content: "↓";
			top: auto;
			bottom: -19px;
		}
	</style>
</head>
<body>

<div id="container"></div>

<input id="left-top" />
<input id="left-center" />
<input id="left-bottom" />
<input id="center-top" />
<input id="center-center" />
<input id="center-bottom" />
<input id="right-top" />
<input id="right-center" />
<input id="right-bottom" />

<ul>
	<li><a href="#">Java</a></li>
	<li><a href="#">JavaScript</a></li>
	<li><a href="#">Perl</a></li>
	<li><a href="#">Ruby</a></li>
	<li><a href="#">C++</a></li>
	<li><a href="#">Python</a></li>
	<li><a href="#">C#</a></li>
</ul>

</body>
</html>
Position: Adding visual testcase for #5284 - Position: Smarter collision detection 2010-03-21 18:48:30 +00:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8" />`
Position Visual Test: Corrected page title - Testcase for #5284 Position: Smarter collision detection 2010-03-21 18:52:18 +00:00			`<title>Position Visual Test: Default</title>`
Position: Adding visual testcase for #5284 - Position: Smarter collision detection 2010-03-21 18:48:30 +00:00			`<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" />`
Upgrade jQuery to 1.7.2. 2012-03-22 13:45:22 +00:00			`<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>`
Position: Adding visual testcase for #5284 - Position: Smarter collision detection 2010-03-21 18:48:30 +00:00			`<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>`
Menu: Extracted menu code from autocomplete, updated all dependencies 2010-04-21 19:01:08 +00:00			`<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>`
Position: Adding visual testcase for #5284 - Position: Smarter collision detection 2010-03-21 18:48:30 +00:00			`<script type="text/javascript">`
			`$(function() {`
Improving visual testcase for position. Partial fix for #5284 - Position: Smarter collision detection 2010-07-30 09:33:49 +00:00			`var inputs = $("input");`
			`$("ul").insertAfter(inputs);`
			`$(window).resize(function() {`
			`inputs.each(function() {`
Position: First draft for a new notification API, via using callback, telling you were the of-element is, not just when something flipped. New test page demonstrates usage 2012-04-10 16:11:28 +00:00			`var input = $(this).position({`
Improving visual testcase for position. Partial fix for #5284 - Position: Smarter collision detection 2010-07-30 09:33:49 +00:00			`my: this.id.replace(/-/, " "),`
			`at: this.id.replace(/-/, " "),`
			`of: "#container",`
			`collision: "none"`
			`});`
Position: First draft for a new notification API, via using callback, telling you were the of-element is, not just when something flipped. New test page demonstrates usage 2012-04-10 16:11:28 +00:00			`var menu = $(this).next().menu()`
			`menu.position({`
Position: Improve feedback API by giving the center/middle position more weight. Also removed themeswitcher from test pages, now load faster 2012-04-11 23:32:30 +00:00			`my: "left+30 top+20",`
Improving visual testcase for position. Partial fix for #5284 - Position: Smarter collision detection 2010-07-30 09:33:49 +00:00			`at: "left bottom",`
Position: Extend main visual test page with simple 'arrow' callouts, as a starting pointing for a better collision notification API 2012-04-03 08:49:34 +00:00			`of: this,`
Position: Use a separate object and argument for the feedback information, keeping position props as they were 2012-04-10 20:16:38 +00:00			`using: function( position, feedback ) {`
			`input.val(feedback.horizontal + " " + feedback.vertical)`
Position: Improve feedback API by giving the center/middle position more weight. Also removed themeswitcher from test pages, now load faster 2012-04-11 23:32:30 +00:00			`$(this).offset( position );`
			`$(this)`
			`.removeClass("left right top bottom center middle")`
Position: Use a separate object and argument for the feedback information, keeping position props as they were 2012-04-10 20:16:38 +00:00			`.addClass(feedback.horizontal)`
			`.addClass(feedback.vertical);`
Position: First draft for a new notification API, via using callback, telling you were the of-element is, not just when something flipped. New test page demonstrates usage 2012-04-10 16:11:28 +00:00			`}`
Improving visual testcase for position. Partial fix for #5284 - Position: Smarter collision detection 2010-07-30 09:33:49 +00:00			`});`
Position: Adding visual testcase for #5284 - Position: Smarter collision detection 2010-03-21 18:48:30 +00:00			`});`
Improving visual testcase for position. Partial fix for #5284 - Position: Smarter collision detection 2010-07-30 09:33:49 +00:00			`}).resize();`
Position: Adding visual testcase for #5284 - Position: Smarter collision detection 2010-03-21 18:48:30 +00:00			`});`
			`</script>`
			`<style>`
			`input, .ui-menu { position: absolute; }`
			`.ui-menu { width: 200px; }`
Update core visual test to allow testing while the window is scrolled. 2011-05-13 22:21:52 +00:00			`html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }`
Position: Adding visual testcase for #5284 - Position: Smarter collision detection 2010-03-21 18:48:30 +00:00			`#container { width: 95%; height: 95%; border: 1px solid black; margin: auto; }`
Position: Extend main visual test page with simple 'arrow' callouts, as a starting pointing for a better collision notification API 2012-04-03 08:49:34 +00:00			`.ui-menu:before {`
			`font-size: 12pt;`
			`content: "↑";`
			`position: absolute;`
			`top: -22px;`
			`left: 5px;`
			`}`
Position: First draft for a new notification API, via using callback, telling you were the of-element is, not just when something flipped. New test page demonstrates usage 2012-04-10 16:11:28 +00:00			`.right:before {`
Position: Extend main visual test page with simple 'arrow' callouts, as a starting pointing for a better collision notification API 2012-04-03 08:49:34 +00:00			`left: auto;`
			`right: 5px;`
			`}`
Position: First draft for a new notification API, via using callback, telling you were the of-element is, not just when something flipped. New test page demonstrates usage 2012-04-10 16:11:28 +00:00			`.bottom:before {`
Position: Extend main visual test page with simple 'arrow' callouts, as a starting pointing for a better collision notification API 2012-04-03 08:49:34 +00:00			`content: "↓";`
			`top: auto;`
			`bottom: -19px;`
			`}`
Position: Adding visual testcase for #5284 - Position: Smarter collision detection 2010-03-21 18:48:30 +00:00			`</style>`
			`</head>`
			`<body>`

			`<div id="container"></div>`

			`<input id="left-top" />`
			`<input id="left-center" />`
			`<input id="left-bottom" />`
			`<input id="center-top" />`
			`<input id="center-center" />`
			`<input id="center-bottom" />`
			`<input id="right-top" />`
			`<input id="right-center" />`
			`<input id="right-bottom" />`

			`<ul>`
			`<li><a href="#">Java</a></li>`
			`<li><a href="#">JavaScript</a></li>`
			`<li><a href="#">Perl</a></li>`
			`<li><a href="#">Ruby</a></li>`
			`<li><a href="#">C++</a></li>`
			`<li><a href="#">Python</a></li>`
			`<li><a href="#">C#</a></li>`
			`</ul>`

			`</body>`
			`</html>`