Controlar la posición de jQuery Context Menu

Después de mi artículo TinyTable v3 con jQuery Context Menu y Dialog UI y de los comentarios sobre el posicionamiento del menú contextual, he decidido hacer este pequeño artículo sobre cómo controlar su posición y evitar que salga fuera de TinyTable o de cualquier otro elemento del que dependa.

Sin las modificaciones en el código de jQuery ContextMenu pasa esto:

En el directorio jqueryContextMenu encontramos jquery.contextMenu.js dónde está el código JavaScript de menú contextual. Sólo es necesario añadir estas líneas para que quede así:

(e.pageX) ? x = e.pageX : x = e.clientX + d.scrollLeft;
(e.pageY) ? y = e.pageY : x = e.clientY + d.scrollTop;

//Código añadido
var menuW = menu.width();
var parentRightPosition = $(this).position().left+$(this).width();
if((x+menuW) > parentRightPosition)
{
     x -= menuW;
}
//fin código añadido
// Show the menu
$(document).unbind('click');
$(menu).css({ top: y, left: x }).fadeIn(o.inSpeed);

Gracias a este código se puede controlar la posición donde va a aparecer el menú contextual, que en nuestro caso es hacia la izquierda si iba a salir fuera del elemento padre:

Acerca de David Figueres Villaró

Vilanova i la Geltrú, Barcelona