<!doctype html>
<html lang="en">
<head>
- <meta charset="utf-8">
- <title>Position Visual Test: Containing Element</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" />
-
+ <meta charset="utf-8">
+ <title>Position Visual Test</title>
<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>
-
<style>
- html, body {
- height:100%;
- width:100%;
- margin:0;
- /* force scroll bar*/
- min-height:800px;
- min-width:800px;
-
- /* IE6 needs this */
- text-align:center;
- }
- .demo-description {
- text-align:center;
- padding:1.5em;
- }
- .demo-container {
- background:#aaa;
- width:80%;
- height:80%;
-
- text-align:left;
- margin:0 auto;
- position:relative;
- padding:10px;
- }
- .demo {
- background:#eee;
- overflow:hidden;
- position:relative;
- height:100%;
- /* IE6 needs this */
- width:100%;
- }
- #parent {
- width: 60%;
- margin: 10px auto;
- padding: 5px;
- border: 1px solid #777;
- background-color: #fbca93;
- text-align: center;
- cursor:move;
- }
- .positionable {
- width: 75px;
- height: 75px;
- position: absolute;
- display: block;
- right: 0;
- bottom: 0;
- background-color: #bcd5e6;
- text-align: center;
- cursor:move;
- }
- .ui-flipped-top {
- border-top: 3px solid #000000;
+ .demo {
+ position: relative;
+ height: 500px;
+ width: 80%;
+ margin: 20px auto;
+ background: #eee;
}
- .ui-flipped-bottom {
- border-bottom: 3px solid #000000;
+ #target {
+ width: 60%;
+ margin: 0 auto;
+ border: 1px solid #777;
+ background-color: #fbca93;
+ text-align: center;
+ cursor: move;
}
- .ui-flipped-left {
- border-left: 3px solid #000000;
+ .positionable {
+ position: absolute;
+ background-color: #bcd5e6;
+ text-align: center;
}
- .ui-flipped-right {
- border-right: 3px solid #000000;
+ .extra-margin {
+ margin: 0 15px 15px 0;
}
- select, input {
- margin-left: 15px;
- }
- .extra-margin {
- margin: 0 15px 15px 0;
- }
</style>
<script>
- $(function() {
- var within = $( ".demo" ),
- positionable = $( ".positionable" );
- function position() {
- positionable.position({
- of: $( "#parent" ),
- my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
- at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
- offset: $( "#offset" ).val(),
- within: within,
- collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
- });
- }
- $( ".demo" ).css("overflow","scroll");
-
- positionable.css( "opacity", 0.5 );
-
-
- $( "#parent" ).draggable({
- drag: function() { position(); }
- });
-
- $("#within").click(function() {
- within = within.is(".demo") ? $(window) : $(".demo");
- position();
- });
-
- $("#margin").click(function() {
- positionable.toggleClass( "extra-margin" );
- position();
- });
-
- $( ":input" ).bind( "click keyup change", function() { position(); } );
-
- position();
- });
+ $(function() {
+ var within = $( ".demo" ),
+ positionable = $( ".positionable" );
+ function position() {
+ positionable.position({
+ of: $( "#target" ),
+ my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
+ at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
+ within: within,
+ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
+ });
+ }
+
+ positionable.css( "opacity", 0.5 );
+
+ $( "#target" ).draggable({
+ drag: function() { position(); }
+ });
+
+ $( "#within" ).click(function() {
+ within = within.is( ".demo" ) ? $( window ) : $( ".demo" );
+ position();
+ });
+
+ $( "#margin" ).click(function() {
+ positionable.toggleClass( "extra-margin" );
+ position();
+ });
+
+ $( ":input" ).bind( "click keyup change", function() { position(); } );
+
+ position();
+ });
</script>
</head>
<body>
-<div class="demo-container">
<div class="demo">
-
- <div id="parent">
- <p>This is the position parent element.</p>
- </div>
-
- <div class="positionable">
- <p>to position</p>
- </div>
-
- <div class="positionable" style="width:120px; height: 40px;">
- <p>to position 2</p>
- </div>
-
- <form style="padding: 20px; margin-top: 75px;">
- <h2>Position configuration:
- <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" selected="selected">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" selected="selected">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>collision:</b>
- <select id="collision_horizontal">
- <option value="flip">flip</option>
- <option value="fit">fit</option>
- <option value="none">none</option>
- </select>
- <select id="collision_vertical">
- <option value="flip">flip</option>
- <option value="fit">fit</option>
- <option value="none">none</option>
- </select>
- </div>
- <div>
- <label for="within">within:</label>
- <input id="within" type="checkbox" checked />
- </div>
- <div>
- <label for="margin">extra margin:</label>
- <input id="margin" type="checkbox" />
- </div>
- </form>
-
-</div><!-- End demo -->
+ <div id="target">
+ <p>This is the position target element.</p>
+ </div>
+
+ <div class="positionable" style="width: 75px; height: 75px;">
+ <p>to position</p>
+ </div>
+
+ <div class="positionable" style="width:120px; height: 40px;">
+ <p>to position 2</p>
+ </div>
+
+ <form style="padding: 20px; margin-top: 75px;">
+ <h2>Position configuration:</h2>
+ <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" selected="selected">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" selected="selected">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>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>
+ <label for="within">within:</label>
+ <input id="within" type="checkbox" checked="checked">
+ </div>
+ <div>
+ <label for="margin">extra margin:</label>
+ <input id="margin" type="checkbox">
+ </div>
+ </form>
</div>
</body>
projects / jquery-ui.git / commitdiff