eulalie: web/static/css/jq-css/demos/position/default.html@6b346cb90c5a (annotated)

30 81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	1	<!DOCTYPE html>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	2	<html lang="en">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	3	<head>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	4	<meta charset="UTF-8" />
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	5	<title>jQuery UI Position - Default functionality</title>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	6	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	7	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	8	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	9	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	10	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	11	<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	12	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	13	<link type="text/css" href="../demos.css" rel="stylesheet" />
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	14	<style type="text/css">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	15
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	16	div#parent {
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	17	width: 60%;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	18	margin: 10px auto;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	19	padding: 5px;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	20
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	21	border: 1px solid #777;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	22	background-color: #fbca93;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	23	text-align: center;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	24	}
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	25
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	26	div.positionable {
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	27	width: 75px;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	28	height: 75px;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	29	position: absolute;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	30	display: block;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	31	right: 0;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	32	bottom: 0;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	33	background-color: #bcd5e6;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	34	text-align: center;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	35	}
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	36
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	37	select, input {
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	38	margin-left: 15px;
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	39	}
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	40
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	41	</style>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	42	<script type="text/javascript">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	43	$(function() {
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	44
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	45	function position(using) {
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	46	$('.positionable').position({
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	47	of: $('#parent'),
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	48	my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	49	at: $('#at_horizontal').val() + ' '+ $('#at_vertical').val(),
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	50	offset: $('#offset').val(),
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	51	using: using,
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	52	collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val()
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	53	});
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	54	}
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	55
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	56	$('.positionable').css("opacity", 0.5);
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	57
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	58	$(':input').bind('click keyup change', function() { position(); });
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	59
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	60	$("#parent").draggable({
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	61	drag: function() { position(); }
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	62	});
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	63
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	64	$('.positionable').draggable({
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	65	drag: function(event, ui) {
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	66	// reset offset before calculating it
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	67	$("#offset").val("0");
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	68	position(function(result) {
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	69	$("#offset").val("" + (ui.offset.left - result.left) + " " + (ui.offset.top - result.top));
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	70	position();
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	71	});
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	72	}
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	73	});
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	74
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	75	position();
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	76	});
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	77	</script>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	78
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	79	</head>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	80	<body>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	81
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	82	<div class="demo">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	83
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	84	<div id="parent">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	85	<p>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	86	This is the position parent element.
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	87	</p>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	88	</div>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	89
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	90	<div class="positionable">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	91	<p>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	92	to position
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	93	</p>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	94	</div>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	95
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	96	<div class="positionable" style="width:120px; height: 40px;">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	97	<p>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	98	to position 2
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	99	</p>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	100	</div>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	101
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	102	<div style="padding: 20px; margin-top: 75px;">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	103	position...
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	104	<div style="padding-bottom: 20px;">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	105	<b>my:</b>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	106	<select id="my_horizontal">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	107	<option value="left">left</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	108	<option value="center">center</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	109	<option value="right">right</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	110	</select>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	111	<select id="my_vertical">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	112	<option value="top">top</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	113	<option value="middle">center</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	114	<option value="bottom">bottom</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	115	</select>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	116	</div>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	117	<div style="padding-bottom: 20px;">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	118	<b>at:</b>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	119	<select id="at_horizontal">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	120	<option value="left">left</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	121	<option value="center">center</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	122	<option value="right">right</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	123	</select>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	124	<select id="at_vertical">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	125	<option value="top">top</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	126	<option value="middle">center</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	127	<option value="bottom">bottom</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	128	</select>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	129	</div>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	130	<div style="padding-bottom: 20px;">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	131	<b>offset:</b>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	132	<input id="offset" type="text" size="15"/>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	133	</div>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	134	<div style="padding-bottom: 20px;">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	135	<b>collision:</b>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	136	<select id="collision_horizontal">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	137	<option value="flip">flip</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	138	<option value="fit">fit</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	139	<option value="none">none</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	140	</select>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	141	<select id="collision_vertical">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	142	<option value="flip">flip</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	143	<option value="fit">fit</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	144	<option value="none">none</option>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	145	</select>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	146	</div>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	147	</div>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	148
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	149	</div><!-- End demo -->
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	150
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	151	<div class="demo-description">
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	152
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	153	<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	154	<br/>Drag around the parent element to see collision detection in action.</p>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	155
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	156	</div><!-- End demo-description -->
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	157
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	158	</body>
81d408373dde itry to have the player in the preview page ymh <ymh.work@gmail.com> parents: diff changeset	159	</html>

author	veltr
	Fri, 11 Oct 2013 17:37:25 +0200
changeset 107	6b346cb90c5a
parent 30	81d408373dde
permissions	-rw-r--r--