library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
e1e43e3109
jquery-ui/tests/visual/position/position_within.html

201 lines
5.8 KiB
HTML
Raw Normal View History

Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Position Visual Test: Containing Element</title>
Add a new visual test for position
2011-05-12 14:27:29 +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" />
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
Finish jquery-1.6.2 migration
2011-07-27 13:40:53 +00:00
<script src="../../../jquery-1.6.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>
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
<style>
Add a new visual test for position
2011-05-12 14:27:29 +00:00
html, body {
height:100%;
width:100%;
margin:0;
Update test to make things a bit easier to test
2011-05-13 20:53:25 +00:00
/* force scroll bar*/
min-height:800px;
min-width:800px;
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
Fix visual test in IE6 and move the new helper functions for getting scrollbar properties to $.position
2011-05-26 14:22:12 +00:00
/* IE6 needs this */
text-align:center;
Add a new visual test for position
2011-05-12 14:27:29 +00:00
}
.demo-description {
text-align:center;
padding:1.5em;
}
.demo-container {
background:#aaa;
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
width:80%;
Add a new visual test for position
2011-05-12 14:27:29 +00:00
height:80%;
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
Fix visual test in IE6 and move the new helper functions for getting scrollbar properties to $.position
2011-05-26 14:22:12 +00:00
text-align:left;
Add a new visual test for position
2011-05-12 14:27:29 +00:00
margin:0 auto;
position:relative;
padding:10px;
}
.demo {
background:#eee;
overflow:hidden;
position:relative;
height:100%;
Fix visual test in IE6 and move the new helper functions for getting scrollbar properties to $.position
2011-05-26 14:22:12 +00:00
/* IE6 needs this */
width:100%;
Add a new visual test for position
2011-05-12 14:27:29 +00:00
}
#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;
}
Position: Cleanup up position demo CSS and add it to the within-visual-test
2011-07-12 15:15:33 +00:00
.ui-flipped-top {
border-top: 3px solid #000000;
}
.ui-flipped-bottom {
border-bottom: 3px solid #000000;
}
.ui-flipped-left {
border-left: 3px solid #000000;
}
.ui-flipped-right {
border-right: 3px solid #000000;
}
Add a new visual test for position
2011-05-12 14:27:29 +00:00
select, input {
margin-left: 15px;
}
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
</style>
<script>
Add a new visual test for position
2011-05-12 14:27:29 +00:00
$(function() {
function position( using ) {
$( ".positionable" ).position({
of: $( "#parent" ),
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
offset: $( "#offset" ).val(),
using: using,
within: $( ".demo" ),
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
});
}
Update test to make things a bit easier to test
2011-05-13 20:53:25 +00:00
$( ".demo" ).append("<div style='width:5000px;height:5000px;' />").css("overflow","auto");
Add a new visual test for position
2011-05-12 14:27:29 +00:00
$( ".positionable" ).css( "opacity", 0.5 );
$( ":input" ).bind( "click keyup change", function() { position(); } );
$( "#parent" ).draggable({
drag: function() { position(); }
});
$( ".positionable" ).draggable({
drag: function( event, ui ) {
// reset offset before calculating it
$( "#offset" ).val( "0" );
position(function( result ) {
Update test to make things a bit easier to test
2011-05-13 20:53:25 +00:00
var demo = $( ".demo" );
$( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) +
" " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) );
Add a new visual test for position
2011-05-12 14:27:29 +00:00
position();
});
}
});
position();
});
</script>
</head>
<body>
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
Add a new visual test for position
2011-05-12 14:27:29 +00:00
<div class="demo-description">
Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
<br/>Drag around the parent element to see collision detection in action.
</div><!-- End demo-description -->
<div class="demo-container">
<div class="demo">
<div id="parent">
<p>This is the position parent element.</p>
</div>
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
Add a new visual test for position
2011-05-12 14:27:29 +00:00
<div class="positionable">
<p>to position</p>
</div>
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
Add a new visual test for position
2011-05-12 14:27:29 +00:00
<div class="positionable" style="width:120px; height: 40px;">
<p>to position 2</p>
</div>
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
Add a new visual test for position
2011-05-12 14:27:29 +00:00
<div style="padding: 20px; margin-top: 75px;">
position...
<div style="padding-bottom: 20px;">
<b>my:</b>
<select id="my_horizontal">
<option value="left">left</option>
<option value="center">center</option>
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
<option value="right" selected="selected">right</option>
Add a new visual test for position
2011-05-12 14:27:29 +00:00
</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>
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
<option value="right" selected="selected">right</option>
Add a new visual test for position
2011-05-12 14:27:29 +00:00
</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>offset:</b>
<input id="offset" type="text" size="15"/>
</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>
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
</div><!-- End demo -->
Add a new visual test for position
2011-05-12 14:27:29 +00:00
</div>
</body>
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
2011-06-09 15:14:21 +00:00
</html>
Reference in New Issue Copy Permalink