Положение div в зависимости от расстояния до края браузера (JavaScript)

Question

Я пытаюсь создать небольшой скрипт всплывающей подсказки, который в основном опирается на CSS. Немного JavaScript, который я не могу понять, это то, как расположить div на основе его расстояния до края браузера.

Когда появляется div, я бы хотел проверить, насколько он близок к верху, низу, слева и справа. Например, если недостаточно места для отображения элемента div над ссылкой всплывающей подсказки, он должен располагаться ниже ссылки.

По сути, я бы хотел, чтобы div "знал" о своей позиции и знал, куда идти, чтобы убедиться, что он видим.

Спасибо

Answer 1

Мне просто пришлось написать очень похожий код для использования с tipsy (поэтому мое решение использует jQuery). Вот основная математика, предполагая, что <div id="mydiv">...</div> - это div, с которым вы работаете. Я учитываю высоту и ширину div при измерении расстояний до правого и нижнего края.

dTop, dBottom, dLeft и dRight - это расстояние от верхнего, нижнего, левого и правого краев элемента, соответственно, до одного и того же края области просмотра. Если вы хотите измерять на основе левого верхнего угла div, не вычитайте dTop или dLeft при вычислении dBottom и dRight.

var $doc = $(document),
    $win = $(window),
    $this = $('#mydiv'),
    offset = $this.offset(),
    dTop = offset.top - $doc.scrollTop(),
    dBottom = $win.height() - dTop - $this.height(),
    dLeft = offset.left - $doc.scrollLeft(),
    dRight = $win.width() - dLeft - $this.width();

Answer 2

См. Размеры и расположение измерительного элемента для получения справки

Answer 3

Этот шпаргалка для библиотеки прототипов имеет хороший пример.