Skip to content

Ability to add a jq-dropdown-above class to force dropdown to appear above #132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eoghanmurray wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Ability to add a jq-dropdown-above class to force dropdown to appear above #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions jquery.dropdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
65 changes: 40 additions & 25 deletions jquery.dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -113,35 +109,54 @@ if (jQuery) (function ($) {
}
}

function position() {
function window_resize() {
var jqDropdown = $('.jq-dropdown:visible').eq(0)
if (jqDropdown.length === 0) return;
jqDropdown.hide(); // we need to be able to get a clean doc_height
position(jqDropdown);
}

function position(jqDropdown) {

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);

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;
if (!trigger) return;

if (jqDropdown.length === 0 || !trigger) return;
// Record dimensions before it is shown
var doc_height = jQuery(document).height();

// Show it
trigger.addClass('jq-dropdown-open');
jqDropdown.show();

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);