Skip to content

Commit

Permalink
Position visual tests: Cleanup.
Browse files Browse the repository at this point in the history
  • Loading branch information
@scottgonzalez
scottgonzalez committed May 21, 2012
1 parent cac6831 commit 75f6b5f
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 178 deletions.
294 changes: 118 additions & 176 deletions tests/visual/position/position.html
View file
@@ -1,200 +1,142 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Position Visual Test: Containing Element</title> <title>Position Visual Test</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 src="../../../jquery-1.7.2.js"></script> <script src="../../../jquery-1.7.2.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script> <script src="../../../ui/jquery.ui.core.js"></script>
<script src="../../../ui/jquery.ui.widget.js"></script> <script src="../../../ui/jquery.ui.widget.js"></script>
<script src="../../../ui/jquery.ui.mouse.js"></script> <script src="../../../ui/jquery.ui.mouse.js"></script>
<script src="../../../ui/jquery.ui.draggable.js"></script> <script src="../../../ui/jquery.ui.draggable.js"></script>
<script src="../../../ui/jquery.ui.position.js"></script> <script src="../../../ui/jquery.ui.position.js"></script>

<style> <style>
html, body { .demo {
height:100%; position: relative;
width:100%; height: 500px;
margin:0; width: 80%;
/* force scroll bar*/ margin: 20px auto;
min-height:800px; background: #eee;
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;
} }
.ui-flipped-bottom { #target {
border-bottom: 3px solid #000000; width: 60%;
margin: 0 auto;
border: 1px solid #777;
background-color: #fbca93;
text-align: center;
cursor: move;
} }
.ui-flipped-left { .positionable {
border-left: 3px solid #000000; position: absolute;
background-color: #bcd5e6;
text-align: center;
} }
.ui-flipped-right { .extra-margin {
border-right: 3px solid #000000; margin: 0 15px 15px 0;
} }
select, input {
margin-left: 15px;
}
.extra-margin {
margin: 0 15px 15px 0;
}
</style> </style>
<script> <script>
$(function() { $(function() {
var within = $( ".demo" ), var within = $( ".demo" ),
positionable = $( ".positionable" ); positionable = $( ".positionable" );
function position() { function position() {
positionable.position({ positionable.position({
of: $( "#parent" ), of: $( "#target" ),
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
offset: $( "#offset" ).val(), within: within,
within: within, collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() });
}); }
}
$( ".demo" ).css("overflow","scroll"); positionable.css( "opacity", 0.5 );


positionable.css( "opacity", 0.5 ); $( "#target" ).draggable({

drag: function() { position(); }

});
$( "#parent" ).draggable({
drag: function() { position(); } $( "#within" ).click(function() {
}); within = within.is( ".demo" ) ? $( window ) : $( ".demo" );

position();
$("#within").click(function() { });
within = within.is(".demo") ? $(window) : $(".demo");
position(); $( "#margin" ).click(function() {
}); positionable.toggleClass( "extra-margin" );

position();
$("#margin").click(function() { });
positionable.toggleClass( "extra-margin" );
position(); $( ":input" ).bind( "click keyup change", function() { position(); } );
});

position();
$( ":input" ).bind( "click keyup change", function() { position(); } ); });

position();
});
</script> </script>
</head> </head>
<body> <body>


<div class="demo-container">
<div class="demo"> <div class="demo">

<div id="target">
<div id="parent"> <p>This is the position target element.</p>
<p>This is the position parent element.</p> </div>
</div>

<div class="positionable" style="width: 75px; height: 75px;">
<div class="positionable"> <p>to position</p>
<p>to position</p> </div>
</div>

<div class="positionable" style="width:120px; height: 40px;">
<div class="positionable" style="width:120px; height: 40px;"> <p>to position 2</p>
<p>to position 2</p> </div>
</div>

<form style="padding: 20px; margin-top: 75px;">
<form style="padding: 20px; margin-top: 75px;"> <h2>Position configuration:</h2>
<h2>Position configuration: <div style="padding-bottom: 20px;">
<div style="padding-bottom: 20px;"> <b>my:</b>
<b>my:</b> <select id="my_horizontal">
<select id="my_horizontal"> <option value="left">left</option>
<option value="left">left</option> <option value="center">center</option>
<option value="center">center</option> <option value="right" selected="selected">right</option>
<option value="right" selected="selected">right</option> </select>
</select> <select id="my_vertical">
<select id="my_vertical"> <option value="top">top</option>
<option value="top">top</option> <option value="middle">center</option>
<option value="middle">center</option> <option value="bottom">bottom</option>
<option value="bottom">bottom</option> </select>
</select> </div>
</div> <div style="padding-bottom: 20px;">
<div style="padding-bottom: 20px;"> <b>at:</b>
<b>at:</b> <select id="at_horizontal">
<select id="at_horizontal"> <option value="left">left</option>
<option value="left">left</option> <option value="center">center</option>
<option value="center">center</option> <option value="right" selected="selected">right</option>
<option value="right" selected="selected">right</option> </select>
</select> <select id="at_vertical">
<select id="at_vertical"> <option value="top">top</option>
<option value="top">top</option> <option value="middle">center</option>
<option value="middle">center</option> <option value="bottom">bottom</option>
<option value="bottom">bottom</option> </select>
</select> </div>
</div> <div style="padding-bottom: 20px;">
<div style="padding-bottom: 20px;"> <b>collision:</b>
<b>collision:</b> <select id="collision_horizontal">
<select id="collision_horizontal"> <option value="flip">flip</option>
<option value="flip">flip</option> <option value="fit">fit</option>
<option value="fit">fit</option> <option value="flipfit">flipfit</option>
<option value="none">none</option> <option value="none">none</option>
</select> </select>
<select id="collision_vertical"> <select id="collision_vertical">
<option value="flip">flip</option> <option value="flip">flip</option>
<option value="fit">fit</option> <option value="fit">fit</option>
<option value="none">none</option> <option value="flipfit">flipfit</option>
</select> <option value="none">none</option>
</div> </select>
<div> </div>
<label for="within">within:</label> <div>
<input id="within" type="checkbox" checked /> <label for="within">within:</label>
</div> <input id="within" type="checkbox" checked="checked">
<div> </div>
<label for="margin">extra margin:</label> <div>
<input id="margin" type="checkbox" /> <label for="margin">extra margin:</label>
</div> <input id="margin" type="checkbox">
</form> </div>

</form>
</div><!-- End demo -->
</div> </div>


</body> </body>
Expand Down
4 changes: 2 additions & 2 deletions tests/visual/position/position_feedback.html
View file
Expand Up @@ -2,8 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Position Visual Test: Default</title> <title>Position Visual Test: Feedback</title>
<link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.7.2.js"></script> <script src="../../../jquery-1.7.2.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script> <script src="../../../ui/jquery.ui.core.js"></script>
Expand Down Expand Up @@ -86,6 +85,7 @@
width: 75px; width: 75px;
height: 25px; height: 25px;
padding: 5px; padding: 5px;
font-size: 62.5%;
} }
#target { #target {
height: 75px; height: 75px;
Expand Down

0 comments on commit 75f6b5f

Please sign in to comment.