Ability to add a jq-dropdown-above class to force dropdown to appear …

…above trigger, similarly to jq-dropdown-anchor-right
soundasleep · Aug 31, 2017 · e6e3616 · e6e3616
1 parent 50a9c28
commit e6e3616
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 25 deletions.
diff --git a/jquery.dropdown.css b/jquery.dropdown.css
@@ -49,6 +49,18 @@
   border-bottom: 6px solid white;
   display: inline-block;
 }
+.jq-dropdown.jq-dropdown-above.jq-dropdown-tip:before {
+  top: auto;
+  bottom: -6px;
+  border-bottom: none;
+  border-top: 7px solid #adc3db;
+}
+.jq-dropdown.jq-dropdown-above.jq-dropdown-tip:after {
+  top: auto;
+  bottom: -5px;
+  border-bottom: none;
+  border-top: 6px solid white;
+}
 .jq-dropdown.jq-dropdown-tip.jq-dropdown-anchor-right:before {
   left: auto;
   right: 9px;

diff --git a/jquery.dropdown.js b/jquery.dropdown.js
@@ -52,14 +52,10 @@ if (jQuery) (function ($) {
 
         if (isOpen || trigger.hasClass('jq-dropdown-disabled')) return;
 
-        // Show it
-        trigger.addClass('jq-dropdown-open');
-        jqDropdown
-            .data('jq-dropdown-trigger', trigger)
-            .show();
+        jqDropdown.data('jq-dropdown-trigger', trigger)
 
-        // Position it
-        position();
+        // Show and position it
+        position(jqDropdown);
 
         // Trigger the show callback
         jqDropdown
@@ -113,35 +109,52 @@ if (jQuery) (function ($) {
         }
     }
 
-    function position() {
+    function window_resize() {
+        var jqDropdown = $('.jq-dropdown:visible').eq(0)
+        jqDropdown.hide(); // we need to be able to get a clean doc_height
+        position(jqDropdown);
+    }
+
+    function position(jqDropdown) {
 
-        var jqDropdown = $('.jq-dropdown:visible').eq(0),
-            trigger = jqDropdown.data('jq-dropdown-trigger'),
-            hOffset = trigger ? parseInt(trigger.attr('data-horizontal-offset') || 0, 10) : null,
-            vOffset = trigger ? parseInt(trigger.attr('data-vertical-offset') || 0, 10) : null;
+        var trigger = jqDropdown.data('jq-dropdown-trigger'),
+            hOffset = parseInt(trigger.attr('data-horizontal-offset') || 0, 10),
+            vOffset = parseInt(trigger.attr('data-vertical-offset') || 0, 10);
 
-        if (jqDropdown.length === 0 || !trigger) return;
+        // Record dimensions before it is shown
+        var doc_height = jQuery(window).height();
+
+        // Show it
+        trigger.addClass('jq-dropdown-open');
+        jqDropdown.show();
 
+        if (jqDropdown.length === 0 || !trigger) return;
+        var pos = {};
         // Position the jq-dropdown relative-to-parent...
         if (jqDropdown.hasClass('jq-dropdown-relative')) {
-            jqDropdown.css({
-                left: jqDropdown.hasClass('jq-dropdown-anchor-right') ?
-                    trigger.position().left - (jqDropdown.outerWidth(true) - trigger.outerWidth(true)) - parseInt(trigger.css('margin-right'), 10) + hOffset :
-                    trigger.position().left + parseInt(trigger.css('margin-left'), 10) + hOffset,
-                top: trigger.position().top + trigger.outerHeight(true) - parseInt(trigger.css('margin-top'), 10) + vOffset
-            });
+            pos['left'] = jqDropdown.hasClass('jq-dropdown-anchor-right') ?
+                trigger.position().left - (jqDropdown.outerWidth(true) - trigger.outerWidth(true)) - parseInt(trigger.css('margin-right'), 10) + hOffset :
+                trigger.position().left + parseInt(trigger.css('margin-left'), 10) + hOffset;
+            if (jqDropdown.hasClass('jq-dropdown-above')) {
+                pos['bottom'] = trigger.parent('.jq-dropdown-container').outerHeight(true) - trigger.position().top - parseInt(trigger.css('margin-top'), 10) - vOffset;
+            } else {
+                pos['top'] = trigger.position().top + trigger.outerHeight(true) - parseInt(trigger.css('margin-top'), 10) + vOffset;
+            }
         } else {
             // ...or relative to document
-            jqDropdown.css({
-                left: jqDropdown.hasClass('jq-dropdown-anchor-right') ?
-                    trigger.offset().left - (jqDropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset,
-                top: trigger.offset().top + trigger.outerHeight() + vOffset
-            });
+            pos['left'] = jqDropdown.hasClass('jq-dropdown-anchor-right') ?
+                trigger.offset().left - (jqDropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset;
+            if (jqDropdown.hasClass('jq-dropdown-above')) {
+                pos['bottom'] = doc_height - trigger.offset().top - vOffset;
+            } else {
+                pos['top'] = trigger.offset().top + trigger.outerHeight() + vOffset;
+            }
         }
+        jqDropdown.css(pos);
     }
 
     $(document).on('click.jq-dropdown', '[data-jq-dropdown]', show);
     $(document).on('click.jq-dropdown', hide);
-    $(window).on('resize', position);
+    $(window).on('resize', window_resize);
 
 })(jQuery);