uikit 3.13.9 → 3.13.11-dev.1296bb84c

package/tests/drop.html

@@ -8,10 +8,14 @@
         <script src="js/test.js"></script>
         <style>
 
-            .boundary { border: 1px dashed rgba(0,0,0,0.2); }
+            .boundary {
+                padding: 15px;
+                border: 1px dashed rgba(0,0,0,0.2);
+                overflow: auto;
+                -webkit-overflow-scrolling: touch;
+            }
 
-            .small-height { height: 80px; }
-            .small-width { width: 165px; }
+            .boundary-overflow { width: 200%; }
 
         </style>
     </head>
@@ -211,112 +215,162 @@
 
             </div>
 
-            <h2>Drop with Boundary</h2>
+            <h2>Shift and Flip</h2>
 
-            <div class="boundary small-height uk-margin uk-flex uk-flex-between">
+            <div class="uk-margin">
+                <select id="js-boundary-overflow-switcher" class="uk-select uk-form-width-small">
+                    <option value="">Resize</option>
+                    <option value="boundary-overflow">Scroll</option>
+                </select>
+            </div>
 
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right</button>
-                    <div uk-drop="pos: bottom-right; boundary: ! .boundary">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-                    </div>
-                </div>
+            <div uk-grid>
+                <div class="uk-width-1-2@m">
 
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Justify</button>
-                    <div uk-drop="pos: bottom-justify; boundary: ! .boundary; boundary-align: true">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-                    </div>
-                </div>
+                    <div class="boundary uk-height-large uk-resize-horizontal uk-margin">
+                        <div class="js-boundary-overflow uk-flex uk-flex-center">
+                            <div>
 
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Center</button>
-                    <div uk-drop="pos: bottom-center; boundary: ! .boundary">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-                    </div>
-                </div>
+                                <button class="uk-button uk-button-default" type="button">Click</button>
+                                <div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Left</button>
-                    <div uk-drop="pos: bottom-left; boundary: ! .boundary; boundary-align: true">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                            </div>
+                        </div>
                     </div>
-                </div>
 
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Right</button>
-                    <div uk-drop="pos: bottom-right; boundary: ! .boundary; boundary-align: true">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-                    </div>
                 </div>
+                <div class="uk-width-1-2@m">
 
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Centered</button>
-                    <div uk-drop="pos: bottom-center; boundary: ! .boundary; boundary-align: true">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-                    </div>
-                </div>
+                    <div class="boundary uk-height-large uk-resize-horizontal uk-margin">
+                        <div class="js-boundary-overflow uk-flex uk-flex-center">
+                            <div>
 
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Left</button>
-                    <div uk-drop="pos: bottom-left; boundary: ! .boundary">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                                <button class="uk-button uk-button-default" style="margin-left: 40px" type="button">Click</button>
+                                <div class="uk-width-small" uk-dropdown="pos: right-top; boundary: !.boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                            </div>
+                        </div>
                     </div>
-                </div>
 
+                </div>
             </div>
 
-            <div class="boundary small-width uk-panel">
+            <h2>Boundary</h2>
 
-                <div class="uk-inline uk-margin-small-bottom">
-                    <button class="uk-button uk-button-default" type="button">Top</button>
-                    <div uk-drop="pos: right-bottom; boundary: ! .boundary">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-                    </div>
-                </div>
+            <div class="uk-child-width-1-2@m" uk-grid>
+                <div>
 
-                <div class="uk-inline uk-margin-small-bottom">
-                    <button class="uk-button uk-button-default" type="button">Justify</button>
-                    <div uk-drop="pos: right-justify; boundary: ! .boundary; boundary-align: true">
-                        <div class="uk-card uk-card-body uk-card-default uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-                    </div>
-                </div>
+                    <div class="boundary uk-height-medium uk-margin uk-flex uk-flex-between uk-flex-wrap">
+                        <div>
 
-                <div class="uk-inline uk-margin-small-bottom">
-                    <button class="uk-button uk-button-default" type="button">Center</button>
-                    <div uk-drop="pos: right-center; boundary: ! .boundary">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-                    </div>
-                </div>
+                            <button class="uk-button uk-button-default" type="button">Bottom Right</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: bottom-right; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 
-                <div class="uk-inline uk-margin-small-bottom">
-                    <button class="uk-button uk-button-default" type="button">Top</button>
-                    <div uk-drop="pos: right-top; boundary: ! .boundary; boundary-align: true">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                        </div>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Bottom Center</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: bottom-center; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Bottom Left</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
                     </div>
+
                 </div>
+                <div>
 
-                <div class="uk-inline uk-margin-small-bottom">
-                    <button class="uk-button uk-button-default" type="button">Bottom</button>
-                    <div uk-drop="pos: right-bottom; boundary: ! .boundary; boundary-align: true">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                    <div class="boundary uk-height-medium uk-flex uk-flex-column uk-flex-between uk-flex-wrap">
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Right Bottom</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: right-bottom; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Right Center</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: right-center; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Right Top</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: right-top; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
                     </div>
+
                 </div>
+            </div>
 
-                <div class="uk-inline uk-margin-small-bottom">
-                    <button class="uk-button uk-button-default" type="button">Centered</button>
-                    <div uk-drop="pos: right-center; boundary: ! .boundary; boundary-align: true">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+            <h2>Boundary Align</h2>
+
+            <div class="uk-child-width-1-2@m" uk-grid>
+                <div>
+
+                    <div class="boundary uk-margin uk-flex uk-flex-around uk-flex-wrap" uk-margin>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Bottom Right</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: bottom-right; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Bottom Center</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: bottom-center; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Bottom Left</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Bottom Justify</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: bottom-justify; boundary: ! .boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
                     </div>
+
                 </div>
+                <div class="uk-width-auto">
 
-                <div class="uk-inline">
-                    <button class="uk-button uk-button-default" type="button">Bottom</button>
-                    <div uk-drop="pos: right-top; boundary: ! .boundary">
-                        <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                    <div class="boundary uk-height-medium uk-flex uk-flex-column uk-flex-around">
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Right Bottom</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: right-bottom; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Right Center</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: right-center; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Right Top</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: right-top; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
+                        <div>
+
+                            <button class="uk-button uk-button-default" type="button">Right Justify</button>
+                            <div class="uk-width-medium" uk-dropdown="pos: right-justify; boundary: ! .boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+
+                        </div>
                     </div>
-                </div>
 
+                </div>
             </div>
 
             <h2>Multiple Toggles</h2>
@@ -377,6 +431,12 @@
                             <td>800</td>
                             <td>Delay time in hover mode before a Drop is hidden in ms.</td>
                         </tr>
+                        <tr>
+                            <td><code>display</code></td>
+                            <td>`dynamic`|`static`</td>
+                            <td>`dynamic`</td>
+                            <td>Disable dynamic positioning while scrolling by setting this option to `static`.</td>
+                        </tr>
                         <tr>
                             <td><code>boundary</code></td>
                             <td>CSS selector</td>
@@ -419,5 +479,19 @@
 
         </div>
 
+        <script>
+
+            var options = UIkit.util.$$('#js-boundary-overflow-switcher option').map(function (option) { return option.value; });
+
+            UIkit.util.on('#js-boundary-overflow-switcher', 'change', function () {
+                var value = this.value;
+                UIkit.util.$$('.js-boundary-overflow').forEach(function (table) {
+                    UIkit.util.removeClass(table, options);
+                    UIkit.util.addClass(table, value);
+                });
+            });
+
+        </script>
+
     </body>
 </html>

package/tests/dropdown.html

@@ -24,7 +24,7 @@
             <h1>Dropdown</h1>
 
             <div uk-grid>
-                <div class="uk-width-1-3@m">
+                <div class="uk-width-1-4@m">
 
                     <div class="uk-dropdown test">
 
@@ -59,7 +59,21 @@
                     </div>
 
                 </div>
-                <div class="uk-width-2-3@m">
+                <div class="uk-width-1-4@m">
+
+                    <div class="uk-dropdown test">
+
+                        <ul class="uk-nav uk-dropdown-nav">
+                            <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                        </ul>
+
+                    </div>
+
+                </div>
+                <div class="uk-width-1-2@m">
 
                     <div class="uk-margin" uk-margin>
 

package/tests/nav.html

@@ -287,6 +287,33 @@
                 </div>
             </div>
 
+            <div class="uk-child-width-1-4@m" uk-grid>
+                <div>
+
+                    <h2>Default</h2>
+
+                    <ul class="uk-nav uk-nav-default">
+                        <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
+                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
+                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
+                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
+                    </ul>
+
+                </div>
+                <div>
+
+                    <h2>Primary</h2>
+
+                    <ul class="uk-nav uk-nav-primary">
+                        <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
+                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
+                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
+                        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
+                    </ul>
+
+                </div>
+            </div>
+
             <h2>JavaScript Options</h2>
 
             <table class="uk-table uk-table-striped">

package/tests/navbar.html

@@ -26,7 +26,7 @@
             <h1>Navbar</h1>
 
             <div uk-grid>
-                <div class="uk-width-2-3@m">
+                <div class="uk-width-1-2@m">
 
                     <nav class="uk-navbar-container uk-margin" uk-navbar>
                         <div class="uk-navbar-left">
@@ -103,7 +103,7 @@
                     <h2>Transparent</h2>
 
                     <div class="uk-margin uk-position-relative uk-light">
-                        <canvas class="uk-background-cover" style="background-image: url('images/dark.jpg')" width="1000" height="200"></canvas>
+                        <canvas class="uk-background-cover" style="background-image: url('images/dark.jpg')" width="1000" height="300"></canvas>
                         <div class="uk-position-top">
                             <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
                                 <div class="uk-navbar-left">
@@ -144,7 +144,7 @@
                     </div>
 
                     <div class="uk-margin uk-position-relative uk-dark">
-                        <canvas class="uk-background-cover" style="background-image: url('images/light.jpg')" width="1000" height="200"></canvas>
+                        <canvas class="uk-background-cover" style="background-image: url('images/light.jpg')" width="1000" height="300"></canvas>
                         <div class="uk-position-top">
                             <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
                                 <div class="uk-navbar-left">
@@ -185,7 +185,7 @@
                     </div>
 
                 </div>
-                <div class="uk-width-1-3@m">
+                <div class="uk-width-1-4@m">
 
                     <div class="uk-navbar-dropdown test">
 
@@ -220,6 +220,20 @@
                     </div>
 
                 </div>
+                <div class="uk-width-1-4@m">
+
+                    <div class="uk-navbar-dropdown test">
+
+                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                            <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
+                        </ul>
+
+                    </div>
+
+                </div>
             </div>
 
             <h2>Dropdown</h2>
@@ -376,7 +390,7 @@
                 </div>
             </nav>
 
-            <nav class="uk-navbar-container uk-margin" uk-navbar="mode:click">
+            <nav class="uk-navbar-container uk-margin" uk-navbar="mode: click">
                 <div class="uk-navbar-left">
 
                     <ul class="uk-navbar-nav">
@@ -1707,6 +1721,43 @@
                 </div>
             </nav>
 
+            <h2>Justify</h2>
+
+            <nav class="uk-navbar-container uk-margin">
+                <div class="uk-navbar-justify" uk-navbar>
+                    <div class="uk-navbar-left">
+
+                        <a class="uk-navbar-item uk-logo" href="#">Logo</a>
+
+                        <ul class="uk-navbar-nav">
+                            <li class="uk-active"><a href="#">Active</a></li>
+                            <li><a href="#">Parent</a></li>
+                            <li><a href="#">Item</a></li>
+                            <li><a href="#">Item</a></li>
+                        </ul>
+
+                    </div>
+                    <div class="uk-navbar-right">
+
+                        <ul class="uk-navbar-nav">
+                            <li><a href="#">Item</a></li>
+                        </ul>
+
+                        <div class="uk-navbar-item">
+                            <ul class="uk-grid-small" uk-grid>
+                                <li>
+                                    <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
+                                </li>
+                                <li>
+                                    <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
+                                </li>
+                            </ul>
+                        </div>
+
+                    </div>
+                </div>
+            </nav>
+
             <h2>Layouts</h2>
 
         </div>

package/tests/parallax.html

@@ -16,7 +16,7 @@
     <body>
 
         <div class="uk-section-default">
-            <div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -400; sepia:100" uk-height-viewport="offset-top: true">
+            <div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -400; sepia: 100" uk-height-viewport="offset-top: true">
 
                 <h1 class="uk-heading-xlarge uk-margin-auto uk-margin-auto-vertical">Parallax</h1>
 
@@ -168,15 +168,15 @@
                             </tr>
                             <tr>
                                 <td><code>start</code></td>
-                                <td>Number|String</td>
+                                <td>Length</td>
                                 <td>0</td>
-                                <td>Start offset. The value can be in vh|%|px. It supports basic mathematics operands + and -. (e.g. 50vh + 50%)</td>
+                                <td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's top border and viewport's bottom border intersect.</td>
                             </tr>
                             <tr>
                                 <td><code>end</code></td>
-                                <td>Number|String</td>
+                                <td>Length</td>
                                 <td>0</td>
-                                <td>End offset. The value can be in vh|%|px. It supports basic mathematics operands + and -. (e.g. 50vh + 50%)</td>
+                                <td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's bottom border and the viewport's top border intersect.</td>
                             </tr>
                             <tr>
                                 <td><code>media</code></td>

package/tests/position.html

@@ -9,7 +9,7 @@
         <style>
 
             /* JavaScript */
-            #js-boundary {
+            #js-viewport {
                 height: 300px;
                 outline: 1px solid rgba(0,0,0,0.1);
                 position: relative;
@@ -26,7 +26,6 @@
 
             #js-element {
                 position: absolute;
-                display: none;
                 width: 75px;
                 height: 75px;
                 background: rgba(0,0,0,0.1);
@@ -238,13 +237,13 @@
 
             <h2>JavaScript</h2>
 
-            <div id="js-boundary" class="uk-margin">
+            <div id="js-viewport" class="uk-margin">
                 <div id="js-target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
             </div>
 
             <div id="js-element"></div>
 
-            <div class="uk-grid uk-child-width-auto uk-form-stacked">
+            <div class="uk-grid uk-child-width-auto uk-form-stacked" style="margin-bottom: 100vh">
                 <div>
 
                     <div class="uk-margin">
@@ -327,27 +326,26 @@
 
         <script>
 
-            var util = UIkit.util,
-                $ = util.$,
-                on = util.on,
-                offset = util.offset,
-                ticking,
-                element = $('#js-element'),
-                boundary = $('#js-boundary'),
-                target = $('#js-target'),
-                offsetX,
-                offsetY;
+            const {$, $$, css, getEventPos, on, offset, positionAt} = UIkit.util;
+            let viewport = $('#js-viewport');
+            let element = $('#js-element');
+            let target = $('#js-target');
+            let offsetX;
+            let offsetY;
 
             function position() {
-                util.positionAt(
+                positionAt(
                     element,
                     target,
-                    $('#js-element_x').value + ' ' + $('#js-element_y').value,
-                    $('#js-target_x').value + ' ' + $('#js-target_y').value,
-                    $('#js-offset_x').value + ' ' + $('#js-offset_y').value,
-                    null,
-                    $('#js-flip_x').value + $('#js-flip_y').value,
-                    boundary
+                    {
+                        viewport,
+                        attach:{
+                            element: [$('#js-element_x').value, $('#js-element_y').value],
+                            target: [$('#js-target_x').value, $('#js-target_y').value]
+                        },
+                        offset: [$('#js-offset_x').value, $('#js-offset_y').value],
+                        flip: [$('#js-flip_x').value, $('#js-flip_y').value]
+                    }
                 );
             }
 
@@ -359,33 +357,34 @@
 
             });
 
+            let lastPos;
             on(window, 'dragover', function (e) {
 
-                e.preventDefault();
-
-                if (!ticking) {
-                    requestAnimationFrame(function () {
+                const pos = getEventPos(e);
 
-                        util.positionAt(
-                            target,
-                            boundary,
-                            'left top',
-                            'left top',
-                            (e.pageX - offset(boundary).left - offsetX) + ' ' + (e.pageY - offset(boundary).top - offsetY)
-                        );
+                if (lastPos?.x === pos.x && lastPos?.y === pos.y) {
+                    return;
+                }
+                lastPos = pos;
 
-                        position();
+                e.preventDefault();
 
-                        ticking = false;
-                    });
-                    ticking = true;
-                }
+                // positions target at mouse cursor
+                positionAt(
+                    target,
+                    viewport,
+                    {
+                        offset: [e.pageX - offset(viewport).left - offsetX, e.pageY - offset(viewport).top - offsetY]
+                    }
+                );
 
+                // positions element at target
+                position();
             });
 
-            util.$$('select,input').forEach(el => on(el, 'change', position));
+            on($$('select,input'), 'change', position);
+            on(window, 'scroll', position);
 
-            util.css(element, 'display', 'block');
             position();
 
         </script>