]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ce73a26)
Position: Use absolute positioning when getting scrollbar width to avoid reflows...
authorScott González <scott.gonzalez@gmail.com>
Thu, 16 May 2013 10:26:03 +0000 (06:26 -0400)
committerScott González <scott.gonzalez@gmail.com>
Thu, 16 May 2013 10:26:03 +0000 (06:26 -0400)
demos/position/default.html patch | blob | history
ui/jquery.ui.position.js patch | blob | history

diff --git a/demos/position/default.html b/demos/position/default.html
index ad5a3d874e71930371d87bc052337cb008839776..f94d316e3ca3d0d3d4309efe1fecc0615e682a4c 100644 (file)
--- a/demos/position/default.html
+++ b/demos/position/default.html
@@ -12,126 +12,68 @@
        <script src="../../ui/jquery.ui.position.js"></script>
        <link rel="stylesheet" href="../demos.css">
        <style>
-       #parent {
-               width: 60%;
-               height: 40px;
-               margin: 10px auto;
-               padding: 5px;
-               border: 1px solid #777;
-               background-color: #fbca93;
-               text-align: center;
+       body {
+           margin: 0;
+           padding: 0;
        }
-       .positionable {
-               position: absolute;
-               display: block;
-               right: 0;
-               bottom: 0;
-               background-color: #bcd5e6;
-               text-align: center;
+       body > div[style*='display'] {
+           /* Workaround */
+           /* position: absolute; */
        }
-       #positionable1 {
-               width: 75px;
-               height: 75px;
+       .blue {
+           background: blue;
+           float: left;
+           width: 100px;
        }
-       #positionable2 {
-               width: 120px;
-               height: 40px;
+       .red {
+           background: red;
+           float: left;
+           overflow-y: hidden;
        }
-       select, input {
-               margin-left: 15px;
+       .content {
+           width: 2000px;
+           height: 400px;
+           border: 2px solid white;
        }
+       #uiPosition {
+           width: 100px;
+           height: 100px;
+           background: #ccc;
+       }
+
        </style>
        <script>
        $(function() {
-               function position() {
-                       $( ".positionable" ).position({
-                               of: $( "#parent" ),
-                               my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
-                               at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
-                               collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
-                       });
-               }
-
-               $( ".positionable" ).css( "opacity", 0.5 );
-
-               $( "select, input" ).bind( "click keyup change", position );
-
-               $( "#parent" ).draggable({
-                       drag: position
+               $( "#redBlock" ).css({
+                   width: $( window ).width() - $( "#blueBlock" ).width()
+               });
+               $( ".block" ).css({
+                   height: $( window ).height()
                });
 
-               position();
+               $( "button" ).on('click', function (e) {
+                   $( "#uiPosition" )
+                       .position({
+                           my: "left top",
+                           at: "left bottom",
+                           of: e.target,
+                           within: $( "#redBlock" ),
+                           collision: "flip"
+                       });
+               });
        });
        </script>
 </head>
 <body>
 
-<div id="parent">
-       <p>
-       This is the position parent element.
-       </p>
-</div>
-
-<div class="positionable" id="positionable1">
-       <p>
-       to position
-       </p>
-</div>
-
-<div class="positionable" id="positionable2">
-       <p>
-       to position 2
-       </p>
-</div>
-
-<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>
-                       <option value="right">right</option>
-               </select>
-               <select id="my_vertical">
-                       <option value="top">top</option>
-                       <option value="center">center</option>
-                       <option value="bottom">bottom</option>
-               </select>
+       <div class="block blue" id="blueBlock"></div>
+       <div class="block red" id="redBlock">
+           <div class="content">
+               <button>Position</button> 
+           </div>     
        </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">right</option>
-               </select>
-               <select id="at_vertical">
-                       <option value="top">top</option>
-                       <option value="center">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>
 
-<div class="demo-description">
-<p>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.</p>
-</div>
+       <div id="uiPosition"></div>
+
 </body>
 </html>
diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js
index 2d3451c0693fd4050039bf5bb98bbf99a5a632f3..d45b24bb168c0752eee0b5de60b779d9e04ae8d6 100644 (file)
--- a/ui/jquery.ui.position.js
+++ b/ui/jquery.ui.position.js
@@ -70,7 +70,7 @@ $.position = {
                        return cachedScrollbarWidth;
                }
                var w1, w2,
-                       div = $( "<div style='display:block;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></div>" ),
+                       div = $( "<div style='display:block;position:absolute;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></div>" ),
                        innerDiv = div.children()[0];
 
                $( "body" ).append( div );
The official jQuery user interface library: https://github.com/jquery/jquery-ui