jquery/test/data/offset/relative.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>relative</title>
		<style type="text/css" media="screen">
			body { margin: 1px; padding: 5px; }
			div.relative { position: relative; top: 0; left: 0; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; background: #fff; overflow: hidden; }
			#relative-2 { top: 20px; left: 20px; }
			#relative-2-1 { margin: auto; width: 50px; }
			#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
		</style>
		<script src="../../jquery.js"></script>
		<script type="text/javascript" charset="utf-8">
			jQuery(function($) {
				$(".relative").click(function() {
					$("#marker").css( $(this).offset() );
					var pos = $(this).position();
					$(this).css({ position: 'absolute', top: pos.top, left: pos.left });
					return false;
				});
			});
		</script>
	</head>
	<body>
		<div id="relative-1" class="relative"><div id="relative-1-1" class="relative"><div id="relative-1-1-1" class="relative"></div></div></div>
		<div id="relative-2" class="relative"><div id="relative-2-1" class="relative"></div></div>
		<div id="marker"></div>
		<p class="instructions">Click the white box to move the marker to it. Clicking the box also changes the position to absolute (if not already) and sets the position according to the position method.</p>
	</body>
</html>
Beginnings of the offset test suite 2007-12-04 20:51:16 +00:00			`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"`
			`"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`
			`<html>`
			`<head>`
			`<meta http-equiv="Content-type" content="text/html; charset=utf-8">`
			`<title>relative</title>`
			`<style type="text/css" media="screen">`
			`body { margin: 1px; padding: 5px; }`
offset is now a setter 2009-09-15 19:15:04 +00:00			`div.relative { position: relative; top: 0; left: 0; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; background: #fff; overflow: hidden; }`
Beginnings of the offset test suite 2007-12-04 20:51:16 +00:00			`#relative-2 { top: 20px; left: 20px; }`
CSS: Correct misrepresentation of "auto" horizontal margins as 0 Fixes gh-2237 Closes gh-2276 (cherry picked from commit 214e1634ab9b1d13d53647dd5de3bdf7a091d49c) Conflicts: src/css.js src/css/support.js test/unit/support.js 2015-05-08 03:16:18 +00:00			`#relative-2-1 { margin: auto; width: 50px; }`
Beginnings of the offset test suite 2007-12-04 20:51:16 +00:00			`#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }`
			`</style>`
Ref #13316: Sync all documents on full vs. minified source. Close gh-1147. 2013-01-28 04:34:38 +00:00			`<script src="../../jquery.js"></script>`
Beginnings of the offset test suite 2007-12-04 20:51:16 +00:00			`<script type="text/javascript" charset="utf-8">`
Moved jQuery global leak to end of file so accidental gEBCN overrides in prototype don't get caught up in confusion. Fixed tests to reference jQuery variable instead of $ (best practice). Fixes #8033 2011-01-24 03:19:33 +00:00			`jQuery(function($) {`
Tests: Change quotes according to style guidelines Close gh-2339 2015-05-21 04:59:06 +00:00			`$(".relative").click(function() {`
			`$("#marker").css( $(this).offset() );`
Added some unit tests for position method. Fixed issue with position in IE. 2008-05-15 19:38:00 +00:00			`var pos = $(this).position();`
			`$(this).css({ position: 'absolute', top: pos.top, left: pos.left });`
Beginnings of the offset test suite 2007-12-04 20:51:16 +00:00			`return false;`
			`});`
			`});`
			`</script>`
			`</head>`
			`<body>`
Added another relative offset test 2007-12-04 21:29:28 +00:00			`<div id="relative-1" class="relative"><div id="relative-1-1" class="relative"><div id="relative-1-1-1" class="relative"></div></div></div>`
CSS: Correct misrepresentation of "auto" horizontal margins as 0 Fixes gh-2237 Closes gh-2276 (cherry picked from commit 214e1634ab9b1d13d53647dd5de3bdf7a091d49c) Conflicts: src/css.js src/css/support.js test/unit/support.js 2015-05-08 03:16:18 +00:00			`<div id="relative-2" class="relative"><div id="relative-2-1" class="relative"></div></div>`
Beginnings of the offset test suite 2007-12-04 20:51:16 +00:00			`<div id="marker"></div>`
Added some unit tests for position method. Fixed issue with position in IE. 2008-05-15 19:38:00 +00:00			`<p class="instructions">Click the white box to move the marker to it. Clicking the box also changes the position to absolute (if not already) and sets the position according to the position method.</p>`
Beginnings of the offset test suite 2007-12-04 20:51:16 +00:00			`</body>`
Moved jQuery global leak to end of file so accidental gEBCN overrides in prototype don't get caught up in confusion. Fixed tests to reference jQuery variable instead of $ (best practice). Fixes #8033 2011-01-24 03:19:33 +00:00			`</html>`