uikit 3.13.2-dev.13a8eb3ff → 3.13.2-dev.696f00752

package/src/less/components/drop.less

@@ -21,8 +21,8 @@
 // ========================================================================
 
 @drop-z-index:                              @global-z-index + 20;
-@drop-width:                                300px;
 @drop-margin:                               @global-margin;
+@drop-width:                                300px;
 
 
 /* ========================================================================
@@ -41,25 +41,17 @@
     /* 2 */
     position: absolute;
     z-index: @drop-z-index;
+    --uk-position-margin-offset: @drop-margin;
     /* 3 */
     box-sizing: border-box;
     width: @drop-width;
+    max-width: 100vw;
 }
 
 /* Show */
 .uk-drop.uk-open { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-drop-top'] { margin-top: -@drop-margin; }
-[class*='uk-drop-bottom'] { margin-top: @drop-margin; }
-[class*='uk-drop-left'] { margin-left: -@drop-margin; }
-[class*='uk-drop-right'] { margin-left: @drop-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */
 

package/src/less/components/dropdown.less

@@ -21,11 +21,11 @@
 // ========================================================================
 
 @dropdown-z-index:                              @global-z-index + 20;
+@dropdown-margin:                               @global-small-margin;
 @dropdown-min-width:                            200px;
 @dropdown-padding:                              15px;
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
-@dropdown-margin:                               @global-small-margin;
 
 @dropdown-nav-item-color:                       @global-muted-color;
 @dropdown-nav-item-hover-color:                 @global-color;
@@ -53,9 +53,11 @@
     /* 2 */
     position: absolute;
     z-index: @dropdown-z-index;
+    --uk-position-margin-offset: @dropdown-margin;
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;
+    max-width: 100vw;
     /* 4 */
     padding: @dropdown-padding;
     background: @dropdown-background;
@@ -120,16 +122,6 @@
 .uk-dropdown-nav .uk-nav-sub li.uk-active > a { color: @dropdown-nav-sublist-item-hover-color; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-dropdown-top'] { margin-top: -@dropdown-margin; }
-[class*='uk-dropdown-bottom'] { margin-top: @dropdown-margin; }
-[class*='uk-dropdown-left'] { margin-left: -@dropdown-margin; }
-[class*='uk-dropdown-right'] { margin-left: @dropdown-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */
 

package/src/less/components/navbar.less

@@ -56,8 +56,8 @@
 @navbar-subtitle-font-size:                     @global-small-font-size;
 
 @navbar-dropdown-z-index:                       @global-z-index + 20;
-@navbar-dropdown-width:                         200px;
 @navbar-dropdown-margin:                        0;
+@navbar-dropdown-width:                         200px;
 @navbar-dropdown-padding:                       15px;
 @navbar-dropdown-background:                    @global-muted-background;
 @navbar-dropdown-color:                         @global-color;
@@ -66,6 +66,7 @@
 
 @navbar-dropdown-dropbar-margin-top:            0;
 @navbar-dropdown-dropbar-margin-bottom:         @navbar-dropdown-dropbar-margin-top;
+@navbar-dropdown-dropbar-padding:               @navbar-nav-item-padding-horizontal;
 
 @navbar-dropdown-nav-item-color:                @global-muted-color;
 @navbar-dropdown-nav-item-hover-color:          @global-color;
@@ -348,9 +349,11 @@
     /* 2 */
     position: absolute;
     z-index: @navbar-dropdown-z-index;
+    --uk-position-margin-offset: @navbar-dropdown-margin;
     /* 3 */
     box-sizing: border-box;
     width: @navbar-dropdown-width;
+    max-width: 100vw;
     /* 4 */
     padding: @navbar-dropdown-padding;
     background: @navbar-dropdown-background;
@@ -361,16 +364,6 @@
 /* Show */
 .uk-navbar-dropdown.uk-open { display: block; }
 
-/*
- * Direction / Alignment modifiers
- */
-
-/* Direction */
-[class*='uk-navbar-dropdown-top'] { margin-top: -@navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-bottom'] { margin-top: @navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-left'] { margin-left: -@navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-right'] { margin-left: @navbar-dropdown-margin; }
-
 /*
  * Grid
  * Adopts `uk-grid`
@@ -397,11 +390,17 @@
 
 /*
  * Dropbar modifier
+ * 1. Set position
+ * 2. Bottom padding for dropbar
+ * 3. Horizontal padding
  */
 
 .uk-navbar-dropdown-dropbar {
-    margin-top: @navbar-dropdown-dropbar-margin-top;
+    /* 1 */
+    --uk-position-margin-offset: @navbar-dropdown-dropbar-margin-top;
+    /* 2 */
     margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
+    padding: @navbar-dropdown-dropbar-padding;
     .hook-navbar-dropdown-dropbar();
 }
 

package/src/less/components/tooltip.less

@@ -21,6 +21,7 @@
 // ========================================================================
 
 @tooltip-z-index:                               @global-z-index + 30;
+@tooltip-margin:                                10px;
 @tooltip-max-width:                             200px;
 @tooltip-padding-vertical:                      3px;
 @tooltip-padding-horizontal:                    6px;
@@ -29,7 +30,6 @@
 @tooltip-color:                                 @global-inverse-color;
 @tooltip-font-size:                             12px;
 
-@tooltip-margin:                                10px;
 
 
 /* ========================================================================
@@ -50,6 +50,7 @@
     /* 2 */
     position: absolute;
     z-index: @tooltip-z-index;
+    --uk-position-margin-offset: @dropdown-margin;
     /* 3 */
     top: 0;
     /* 4 */
@@ -68,16 +69,6 @@
 .uk-tooltip.uk-active { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-tooltip-top'] { margin-top: -@tooltip-margin; }
-[class*='uk-tooltip-bottom'] { margin-top: @tooltip-margin; }
-[class*='uk-tooltip-left'] { margin-left: -@tooltip-margin; }
-[class*='uk-tooltip-right'] { margin-left: @tooltip-margin; }
-
-
 // Hooks
 // ========================================================================
 

package/src/scss/components/drop.scss

@@ -21,8 +21,8 @@
 // ========================================================================
 
 $drop-z-index:                               $global-z-index + 20 !default;
-$drop-width:                                 300px !default;
 $drop-margin:                                $global-margin !default;
+$drop-width:                                 300px !default;
 
 
 /* ========================================================================
@@ -41,25 +41,17 @@ $drop-margin:                                $global-margin !default;
     /* 2 */
     position: absolute;
     z-index: $drop-z-index;
+    --uk-position-margin-offset: #{$drop-margin};
     /* 3 */
     box-sizing: border-box;
     width: $drop-width;
+    max-width: 100vw;
 }
 
 /* Show */
 .uk-drop.uk-open { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-drop-top'] { margin-top: (-$drop-margin); }
-[class*='uk-drop-bottom'] { margin-top: $drop-margin; }
-[class*='uk-drop-left'] { margin-left: (-$drop-margin); }
-[class*='uk-drop-right'] { margin-left: $drop-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */
 

package/src/scss/components/dropdown.scss

@@ -21,11 +21,11 @@
 // ========================================================================
 
 $dropdown-z-index:                               $global-z-index + 20 !default;
+$dropdown-margin:                                $global-small-margin !default;
 $dropdown-min-width:                             200px !default;
 $dropdown-padding:                               15px !default;
 $dropdown-background:                            $global-muted-background !default;
 $dropdown-color:                                 $global-color !default;
-$dropdown-margin:                                $global-small-margin !default;
 
 $dropdown-nav-item-color:                        $global-muted-color !default;
 $dropdown-nav-item-hover-color:                  $global-color !default;
@@ -53,9 +53,11 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
     /* 2 */
     position: absolute;
     z-index: $dropdown-z-index;
+    --uk-position-margin-offset: #{$dropdown-margin};
     /* 3 */
     box-sizing: border-box;
     min-width: $dropdown-min-width;
+    max-width: 100vw;
     /* 4 */
     padding: $dropdown-padding;
     background: $dropdown-background;
@@ -120,16 +122,6 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
 .uk-dropdown-nav .uk-nav-sub li.uk-active > a { color: $dropdown-nav-sublist-item-hover-color; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-dropdown-top'] { margin-top: (-$dropdown-margin); }
-[class*='uk-dropdown-bottom'] { margin-top: $dropdown-margin; }
-[class*='uk-dropdown-left'] { margin-left: (-$dropdown-margin); }
-[class*='uk-dropdown-right'] { margin-left: $dropdown-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */
 

package/src/scss/components/navbar.scss

@@ -56,8 +56,8 @@ $navbar-toggle-hover-color:                      $global-color !default;
 $navbar-subtitle-font-size:                      $global-small-font-size !default;
 
 $navbar-dropdown-z-index:                        $global-z-index + 20 !default;
-$navbar-dropdown-width:                          200px !default;
 $navbar-dropdown-margin:                         0 !default;
+$navbar-dropdown-width:                          200px !default;
 $navbar-dropdown-padding:                        15px !default;
 $navbar-dropdown-background:                     $global-muted-background !default;
 $navbar-dropdown-color:                          $global-color !default;
@@ -66,6 +66,7 @@ $navbar-dropdown-grid-gutter-vertical:           $navbar-dropdown-grid-gutter-ho
 
 $navbar-dropdown-dropbar-margin-top:             0 !default;
 $navbar-dropdown-dropbar-margin-bottom:          $navbar-dropdown-dropbar-margin-top !default;
+$navbar-dropdown-dropbar-padding:                $navbar-nav-item-padding-horizontal !default;
 
 $navbar-dropdown-nav-item-color:                 $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color:           $global-color !default;
@@ -348,9 +349,11 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     /* 2 */
     position: absolute;
     z-index: $navbar-dropdown-z-index;
+    --uk-position-margin-offset: #{$navbar-dropdown-margin};
     /* 3 */
     box-sizing: border-box;
     width: $navbar-dropdown-width;
+    max-width: 100vw;
     /* 4 */
     padding: $navbar-dropdown-padding;
     background: $navbar-dropdown-background;
@@ -361,16 +364,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 /* Show */
 .uk-navbar-dropdown.uk-open { display: block; }
 
-/*
- * Direction / Alignment modifiers
- */
-
-/* Direction */
-[class*='uk-navbar-dropdown-top'] { margin-top: (-$navbar-dropdown-margin); }
-[class*='uk-navbar-dropdown-bottom'] { margin-top: $navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-left'] { margin-left: (-$navbar-dropdown-margin); }
-[class*='uk-navbar-dropdown-right'] { margin-left: $navbar-dropdown-margin; }
-
 /*
  * Grid
  * Adopts `uk-grid`
@@ -397,11 +390,17 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 /*
  * Dropbar modifier
+ * 1. Set position
+ * 2. Bottom padding for dropbar
+ * 3. Horizontal padding
  */
 
 .uk-navbar-dropdown-dropbar {
-    margin-top: $navbar-dropdown-dropbar-margin-top;
+    /* 1 */
+    --uk-position-margin-offset: #{$navbar-dropdown-dropbar-margin-top};
+    /* 2 */
     margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
+    padding: $navbar-dropdown-dropbar-padding;
     @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
 }
 

package/src/scss/components/tooltip.scss

@@ -21,6 +21,7 @@
 // ========================================================================
 
 $tooltip-z-index:                                $global-z-index + 30 !default;
+$tooltip-margin:                                 10px !default;
 $tooltip-max-width:                              200px !default;
 $tooltip-padding-vertical:                       3px !default;
 $tooltip-padding-horizontal:                     6px !default;
@@ -29,7 +30,6 @@ $tooltip-border-radius:                          2px !default;
 $tooltip-color:                                  $global-inverse-color !default;
 $tooltip-font-size:                              12px !default;
 
-$tooltip-margin:                                 10px !default;
 
 
 /* ========================================================================
@@ -50,6 +50,7 @@ $tooltip-margin:                                 10px !default;
     /* 2 */
     position: absolute;
     z-index: $tooltip-z-index;
+    --uk-position-margin-offset: #{$dropdown-margin};
     /* 3 */
     top: 0;
     /* 4 */
@@ -68,16 +69,6 @@ $tooltip-margin:                                 10px !default;
 .uk-tooltip.uk-active { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-tooltip-top'] { margin-top: (-$tooltip-margin); }
-[class*='uk-tooltip-bottom'] { margin-top: $tooltip-margin; }
-[class*='uk-tooltip-left'] { margin-left: (-$tooltip-margin); }
-[class*='uk-tooltip-right'] { margin-left: $tooltip-margin; }
-
-
 // Hooks
 // ========================================================================
 

package/src/scss/variables-theme.scss

@@ -366,14 +366,14 @@ $inverse-dotnav-item-onclick-background: rgba($inverse-global-color, 0.5) !defau
 $inverse-dotnav-item-active-background: rgba($inverse-global-color, 0.9) !default;
 $global-z-index: 1000 !default;
 $drop-z-index: $global-z-index + 20 !default;
-$drop-width: 300px !default;
 $drop-margin: $global-margin !default;
+$drop-width: 300px !default;
 $dropdown-z-index: $global-z-index + 20 !default;
+$dropdown-margin: $global-small-margin !default;
 $dropdown-min-width: 200px !default;
 $dropdown-padding: 25px !default;
 $dropdown-background: $global-background !default;
 $dropdown-color: $global-color !default;
-$dropdown-margin: $global-small-margin !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
 $dropdown-nav-header-color: $global-emphasis-color !default;
@@ -739,8 +739,8 @@ $navbar-toggle-color: $global-muted-color !default;
 $navbar-toggle-hover-color: $global-color !default;
 $navbar-subtitle-font-size: $global-small-font-size !default;
 $navbar-dropdown-z-index: $global-z-index + 20 !default;
-$navbar-dropdown-width: 200px !default;
 $navbar-dropdown-margin: 15px !default;
+$navbar-dropdown-width: 200px !default;
 $navbar-dropdown-padding: 25px !default;
 $navbar-dropdown-background: $global-background !default;
 $navbar-dropdown-color: $global-color !default;
@@ -748,6 +748,7 @@ $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-dropbar-margin-top: 0 !default;
 $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
+$navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
 $navbar-dropdown-nav-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
@@ -1014,6 +1015,7 @@ $tile-primary-color-mode: light !default;
 $tile-secondary-background: $global-secondary-background !default;
 $tile-secondary-color-mode: light !default;
 $tooltip-z-index: $global-z-index + 30 !default;
+$tooltip-margin: 10px !default;
 $tooltip-max-width: 200px !default;
 $tooltip-padding-vertical: 3px !default;
 $tooltip-padding-horizontal: 6px !default;
@@ -1021,7 +1023,6 @@ $tooltip-background: #666 !default;
 $tooltip-border-radius: 2px !default;
 $tooltip-color: $global-inverse-color !default;
 $tooltip-font-size: 12px !default;
-$tooltip-margin: 10px !default;
 $totop-padding: 5px !default;
 $totop-color: $global-muted-color !default;
 $totop-hover-color: $global-color !default;

package/src/scss/variables.scss

@@ -365,14 +365,14 @@ $inverse-dotnav-item-onclick-background: rgba($inverse-global-color, 0.5) !defau
 $inverse-dotnav-item-active-background: rgba($inverse-global-color, 0.9) !default;
 $global-z-index: 1000 !default;
 $drop-z-index: $global-z-index + 20 !default;
-$drop-width: 300px !default;
 $drop-margin: $global-margin !default;
+$drop-width: 300px !default;
 $dropdown-z-index: $global-z-index + 20 !default;
+$dropdown-margin: $global-small-margin !default;
 $dropdown-min-width: 200px !default;
 $dropdown-padding: 15px !default;
 $dropdown-background: $global-muted-background !default;
 $dropdown-color: $global-color !default;
-$dropdown-margin: $global-small-margin !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
 $dropdown-nav-header-color: $global-emphasis-color !default;
@@ -737,8 +737,8 @@ $navbar-toggle-color: $global-muted-color !default;
 $navbar-toggle-hover-color: $global-color !default;
 $navbar-subtitle-font-size: $global-small-font-size !default;
 $navbar-dropdown-z-index: $global-z-index + 20 !default;
-$navbar-dropdown-width: 200px !default;
 $navbar-dropdown-margin: 0 !default;
+$navbar-dropdown-width: 200px !default;
 $navbar-dropdown-padding: 15px !default;
 $navbar-dropdown-background: $global-muted-background !default;
 $navbar-dropdown-color: $global-color !default;
@@ -746,6 +746,7 @@ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-dropbar-margin-top: 0 !default;
 $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
+$navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
 $navbar-dropdown-nav-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
@@ -1012,6 +1013,7 @@ $tile-primary-color-mode: light !default;
 $tile-secondary-background: $global-secondary-background !default;
 $tile-secondary-color-mode: light !default;
 $tooltip-z-index: $global-z-index + 30 !default;
+$tooltip-margin: 10px !default;
 $tooltip-max-width: 200px !default;
 $tooltip-padding-vertical: 3px !default;
 $tooltip-padding-horizontal: 6px !default;
@@ -1019,7 +1021,6 @@ $tooltip-background: #666 !default;
 $tooltip-border-radius: 2px !default;
 $tooltip-color: $global-inverse-color !default;
 $tooltip-font-size: 12px !default;
-$tooltip-margin: 10px !default;
 $totop-padding: 5px !default;
 $totop-color: $global-muted-color !default;
 $totop-hover-color: $global-color !default;

package/tests/drop.html

@@ -381,7 +381,7 @@
                             <td><code>boundary</code></td>
                             <td>CSS selector</td>
                             <td>true</td>
-                            <td>Referenced element to keep Drop's visibility. By default, it's the window.</td>
+                            <td>The area that the element will be checked for overflow, causing the Drop to flip. By default, it's the scrolling containers of the Drop's element.</td>
                         </tr>
                         <tr>
                             <td><code>boundary-align</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>