jQuery Position Element

Position an element not in document flow relative to element that is.

by colin_young

HTML

<ul>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
    <li>Spacer</li>
</ul>
<div class="token-box">Tokens:
    <input class="token" type="text" />
    <button class="check">check</button>
    <ul>
        <li>Spacer</li>
        <li>Spacer</li>
        <li>Spacer</li>
        <li>Spacer</li>
    </ul>
    <div class="spacer">More space</div>
</div>
<div id='popup' class='token-input-dropdown' style='position: absolute;'>1. The content of the popup</div>
<div id='popup-top' class='token-input-dropdown' style='position: absolute;'>2. The content of the popup</div>

CSS

div.token-input-dropdown {
    position: absolute;
    width: 400px;
    background-color: #fff;
    overflow: hidden;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    cursor: default;
    font-size: 12px;
    font-family: Verdana, sans-serif;
    z-index: 1;
}
ul { color: #CCC; }

JavaScript

var dropdown = $('#popup');
var topDropdown = $('#popup-top');
var token_list = $('.token');

var windowHeight = $(window).height();
var docViewTop = $(window).scrollTop();
var dropdownPosition = $(token_list).offset().top + $(token_list).outerHeight();
var availableSpace = windowHeight - (dropdownPosition - docViewTop)
var borderWidth = parseInt(dropdown.css('border-bottom-width'));

dropdown.css('top', '');

var bodyHeight = $('body').outerHeight();
var bodyTop = $('body').offset().top;
var bottom;

if ((bodyHeight + bodyTop) < dropdownPosition) {
    bottom = dropdownPosition - (bodyTop + bodyHeight);
}
else {
    bottom = (bodyTop + bodyHeight) - ($(token_list).offset().top + borderWidth);
}

dropdown.position({
  my: "left bottom",
  at: "left top",
  of: ".token"
});

dropdown.css({
    'border-top-width': borderWidth,
    'border-top-color': dropdown.css('border-bottom-color'),
    'border-top-style': dropdown.css('border-bottom-style')
});

topDropdown.css({
    'left': $(token_list).offset().left,
    'top': $(token_list).offset().top + $(token_list).outerHeight()
});