Определить, будет ли отображаться веб-меню в раскрывающемся меню

Question

У меня есть простое выпадающее меню на основе CSS с несколькими уровнями. Второй или третий уровень может выходить за пределы видимого окна с определенными комбинациями разрешения и размера окна.

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

Как я могу проверить (с JS / jQuery) для этой ситуации?

Answer 1

Вы можете проверить, находится ли пункт меню вне экрана, с помощью следующей функции:

/*---   function bIsNodeClippedOrOffscreen returns true if a node
        is offscreen (without scrolling).
        Requires jQuery.
*/
function bIsNodeClippedOrOffscreen (zJnode)
{
    var aDivPos             = zJnode.offset ();
    var iLeftPos            = aDivPos.left;
    var iTopPos             = aDivPos.top;

    var iDivWidth           = zJnode.outerWidth  (true);
    var iDivHeight          = zJnode.outerHeight (true);

    var bOffScreen          = CheckIfPointIsOffScreen (iLeftPos, iTopPos);
    var bClipped            = CheckIfPointIsOffScreen (iLeftPos + iDivWidth, iTopPos + iDivHeight);

    return (bOffScreen || bClipped);
}


function CheckIfPointIsOffScreen (iLeftPos, iTopPos)
{
    var iBrowserWidth       = $(window).width()  - 16;   //-- 16 is fudge for scrollbars, refine later
    var iBrowserHeight      = $(window).height() - 16;   //-- 16 is fudge for scrollbars, refine later
    var bOffScreen          = false;

    if (iLeftPos < 0  ||  iLeftPos >= iBrowserWidth)
        bOffScreen          = true;

    if (iTopPos < 0   ||  iTopPos >= iBrowserHeight)
        bOffScreen          = true;

    return bOffScreen;
}

.
Пример использования:

<li id="SomeMenuItem"> Get your shopping cart for free!
...
...

var Node            = $("#SomeMenuItem");

var NeedToMoveIt    = bIsNodeClippedOrOffscreen (Node);

Answer 2

Когда меню еще не отображается, вы не можете получить его размеры. установить свою позицию. Если вы установите CSS visibility: hidden и display: none, меню не будет отображаться, но для будут определены размеры . Затем вы можете получить его положение, используя jQuery.offset, а его высоту / ширину - jQuery.outerWidth/outerHeight (обратите внимание на опции margin для последних функций). Да, и будьте осторожны, если вы используете какие-либо отрицательные поля, это потребует специальной обработки.

Получите размеры окна с помощью jQuery(window).height() и .width(), и вы сможете вычислить математику оттуда.

Answer 3

Вы должны отобразить элемент, чтобы получить размер, поэтому выведите подменю за пределы экрана. Получите ширину / высоту элемента, рассчитайте ожидаемые позиции отображения (справа / снизу), сравните с шириной / высотой экрана, решите, какое место отображать, и переместите элемент в конечную позицию.

(непроверенный пример)

function displaysOffPageRight(defaultLeft){
    $('#submenu1').addClass('displayOffScreen');
    var offPage = defaultLeft + $('#submenu1').width() > screen.width;
    $('#submenu1').removeClass('displayOffScreen');
    return offPage;
}