检测网络下拉菜单是否要在屏幕外显示 [英] Detect if a web, drop-down menu is going to display off screen

问题描述

我有一个基于CSS的简单下拉菜单与多层次。第二个或第三个级别可能会超出可见窗口，分辨率和窗口大小的某些组合。

I have a CSS based simple drop down menu with multi-levels. The second or third level might go outside the visible window, with certain combinations of resolution and window size.

一些预构建的菜单控件只打开下拉到如果他们检测到这种情况，就离开而不是右边。

Some pre-built menu controls just open the drop-down to the left instead of the right, if they detect this situation.

如何测试（使用JS / jQuery）这种情况？

How can I test (with JS/jQuery) for this situation?

推荐答案

您可以使用以下函数测试菜单项是否在屏幕外：

You can test if a menu item is offscreen with the following function:

/*---   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;
}

。

使用示例：

.
Sample usage:

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

var Node            = $("#SomeMenuItem");

var NeedToMoveIt    = bIsNodeClippedOrOffscreen (Node);

这篇关于检测网络下拉菜单是否要在屏幕外显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！