Detecta si un menú desplegable web se va a mostrar fuera de la pantalla

Tengo un menú desplegable simple basado en CSS con varios niveles. El segundo o tercer nivel puede salir de la ventana visible, con ciertas combinaciones de resolución y tamaño de ventana.

Algunos controles de menú preintegrados solo abren el menú desplegable a la izquierda en lugar de a la derecha, si detectan esta situación.

¿Cómo puedo probar (con JS / jQuery) para esta situación?

Puede probar si un elemento del menú está fuera de la pantalla con la siguiente función:

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

.
Uso de muestra:

 
  • Get your shopping cart for free! ... ... var Node = $("#SomeMenuItem"); var NeedToMoveIt = bIsNodeClippedOrOffscreen (Node);
  • Debe mostrar el elemento para obtener el tamaño, de modo que muestre el submenú fuera de pantalla. Obtenga el ancho / alto del elemento, las posiciones de visualización esperadas calculadas (derecha / abajo), compare con el ancho / alto de la pantalla, decida qué ubicación mostrar y mueva el elemento a la posición final.

    (ejemplo no probado)

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

    Cuando el menú aún no se muestra, no puede obtener sus dimensiones. para establecer su posición. Si configura visibility: invisible CSS visibility: invisible y display: none , el menú no se mostrará pero tendrá sus dimensiones definidas. Luego puede obtener su posición usando jQuery.offset y su altura / ancho con jQuery.outerWidth/outerHeight (preste atención a las opciones de margin para las últimas funciones). Ah, y tenga cuidado si usa márgenes negativos, esto requeriría un manejo especial.

    Obtenga las dimensiones de la ventana con jQuery(window).height() y .width() y podrá averiguar las matemáticas desde allí.