Question

I created a contextmenu in my Website, that shows up on right click.
In that contextmenu I’ve got some submenus that will aply on the right site of the menu.

The problem is now that if you call up the contextmenu on the right side of the page, there isn’t enough space left to display the submenus, and the browser adds a horizontal scrollbar.

Is there any JavaScript command or else where you can change the position of the submenus in the CSS, if there isn’t enough space left in the browser?

Answer 1

a draft of what you can do can be found live on JsBin

You can easily get the position of the mouse and check it again the document width.

code uses jQuery for simplicity.

$(document).mousemove(function(e){

  var CONTEXT_MENU_WIDTH = 200,
      pos = 'RIGHT';
  if( ($(document).width() - CONTEXT_MENU_WIDTH) < e.pageX )
    pos = 'LEFT';     

  $('#status').html(e.pageX +', '+ e.pageY);
  $('#position span').html(pos);

}); 

Edited

just added a simple vertical line to help with the position.

CONTEXT_MENU_WIDTH variable should be the area width that you want the context menu change position.