arnklint / jquery-contextmenu Goto Github PK

I have a set of run time defined divs that each have the same context menu (interspersed with items having a second menu, and one moving item with a third menu, so putting something on an outer container doesn't seem fruitful). As items come and go, I acquire an ever expanding set of identical hidden menus at the end of the body. I'd rather have just one (of each distinct menu).
Looking at the code, it seems that binding the same mouse event handler to multiple triggering elements would just work. The correct menu is known to the handler through closure, and the handler would still get the correct triggering element as "this".
[I'm working on an approach where the final binding step is abstracted into another function defined within the jQuery.fn.contextMenu call, and is thus closed on the correct event handler, and which takes, as an argument, the jQuery object on which to call .bind() or .on(). An additional option, or additional optional argument, or calling jQuery.fn.contextMenu on an empty jQuery object would cause the binding function to be returned instead of called. So I would call contextMenu with the (currently extra option) and save the returned function, later applying it to the elements that need that menu as they came into existence. Suggestions welcome.

Indeed, this approach seems to work, tested with Chrome.]

Hi,

I've started using your plugin (simple and great), but I have an issue now. I am adding elements dinamycally on my page (using ajax) and I want for those elements to have right click also. Currently, when I add new elements, old right clicks also stop to work.

Best regards,
Nemanja

http://api.jquery.com/jQuery.browser/ was removed (and depr. since 1.3)

Your code now fails here:

if ($.browser.msie && options.leftClick) {
  mouseEvent = 'click';
} else if ($.browser.msie && !options.leftClick) {
  mouseEvent = 'contextmenu';
}

Hi, to allow the possibility to use a variable in the text of the menu I modified row 38 in:

        textMenu = (itemOptions.text) ? itemOptions.text : me;
        var menuItem = $('<li><a href="#">' + textMenu + '</a></li>');

this allows to pass the parameter text with a possible variable.
Thanks for this very useful plugin

In firefox the menu appears correctly at the cursor when right clicked. In chrome (version 51.0.2704.84 m) the menu appears quite a way below the cursor. Very confusing as you are not sure which element you have clicked.

See screenshot

Any ideas?

So, after spending several minutes snooping around, I've still yet to see any reference to a demo.

Do I really need to download this plugin and program it just to see if it's what I'm looking for?

In IE8, Examples 1 + 3 don't work at all and with example 2 it works with both mouse buttons (even though it's only supposed to work with the left button). also, the menu appears to the top left of the cursor, instead of the bottom right.

Thanks for your great menu, it's very convenient!

I have a page with multiples menus (one by node, number of node depends on external data) and it is slow when i want to show the default context menu.

Replacing this

hideMenu = function() {
  $('.context-menu').each(function() {
    $(this).trigger("closed");
    $(this).hide();
  });
},

by this fix it for me.

hideMenu = function() {
  $("#" + name).trigger("closed");
  $("#" + name).hide();
  $('body').unbind('click', hideMenu);
},

using chrome profiler it seams that when i show the default context menu it call hideMenu on each of them, which in turn call

  function() {
    $(this).trigger("closed");
    $(this).hide();
  }

on each menu.

So if i have 100 menu. it call that function 10,000 times which is slowing the default context menu.

Useful plugin but it doesn't appear to support the use of jQuery.noConflict()

Solved by checking that Menu width/height + Pos fit in window

// To have a reliable size of the menu it needs to
    // be visible (even if it isnt drawn to the screen)
  menu.css({
        visibility: 'hidden',
        position: 'absolute',
        zIndex: 1000
  });

    // include margin so it can be used to offset from page border.
    var mWidth = menu.outerWidth(true);
    var mHeight = menu.outerHeight(true);

  var xPos = ((e.pageX - window.scrollX) + mWidth < window.innerWidth) ? e.pageX : e.pageX - mWidth;
  var yPos = ((e.pageY - window.scrollY) + mHeight < window.innerHeight) ? e.pageY : e.pageY - mHeight;

  menu.css({
        visibility: 'visible',
        top: yPos + 'px',
        left: xPos + 'px',
  });