Hi,

I've been searching the past 2 days for a perfect context menu, this one and another one stand out above all others. To put it in perspective: I am developing an app with AngularJS. Thus I rather have a angular context menu then a default jquery menu. One came really close: https://github.com/Templarian/ui.bootstrap.contextMenu Yet this one was not so nice with providing icons, keyboard events some other things. But it does has one major improvement above this one: Async create sub menu's. Instead of providing an item I can provide an promise, which would be loaded once the user has opened the sub-menu.

Perhaps it would be possible to implement something similar to this? So instead of only providing items, or a list of items, provide a promise, and once it is completed it will render the sub menu's.

I know the documentation provides something with async loading the context menu, but that's not what I am looking for, that happens before everything is created. This should happen once the context menu has already been created, either after the menu has opened, or once the user wants to open the sub menu.

See the plunker for an example using that angular directive: https://embed.plnkr.co/Bebmjn2aAlflxYe1cwIS/

Similar to #421, but then new created sub menu's.

I have just updated to version 2.0.0 and noticed that the submenu sometimes resize weird and for some reason its missing 1 px in the width even tho the width is not over max-width. I have made a jsfiddle that shows the problem here: http://jsfiddle.net/RareDevil/vww70pLa/

I'm still trying to find out why this problem is there and i have not yet found the problem.

If a selector isn't available, is there any other way to use this plugin?

For example, given:

$("#container .thing").each(function() {
    $(this).anotherPlugin(); // 
});

If anotherPlugin wants to create a context menu, there appears to be no way to limit its effects to only the .thing elements in #container, since anotherPlugin() does not get a selector.

If contextMenu() can't behave like other jquery plugins (i.e. $(selector).contextMenu()), then can its 'selector' attribute also allow objects in addition to string selectors? e.g. I could, within anotherPlugin, do something like:

$.contextMenu({ selector: $(this) });

Or am I missing an altogether better solution? thanks,

I have plugged the contextMenu into my site and I am trying to use it on the iPad. It is opening just fine, but when I click on an item, the callback method is not firing.

Do you have any suggestions?

Hi,

This is a feature request rather than an issue ticket. I would love to have the possibility to dynamically add items to a contextmenu at runtime.

The scenario: A contextmenu gets triggered and the menu items are created depending on info from the trigger element. Like 'Add to' > [bunch of dynamic elements]

I tried to alter the opt.commands and opt.items objects in the show event of the contextmenu but with no effect.

One way to achieve this would be a beforeRender event where it's possible to replace the items created at registration with new ones. Another way (seen at jjmenu plugin) is instead of a hardcoded item object literal one can use a function which provides context (of the trigger element) and returns a dynamically created item.

As a workaround (haven't tested this yet) it should be possible to register a click event with jQuery which then (functions as wrapper and) creates a $.contextMenu with items in the context of the click event. But this could get messy really quick with a lot of different trigger events.

I don't know if this functionality is within the designated scope of jQuery-contextMenu, but it would greatly enhance the overall very good experience with this plugin. :)

Thanks.

Hi there,

I'm trying to open a bootstrap modal when click on the item inside contextMenu. But it fails to open modal.

The code is as appended below,

<div class="portlet-body">
  <div id="context" data-toggle="context" data-target="#context-menu">
    <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras.
      </p>
  </div>
  <!-- Your custom menu with dropdown-menu as default styling -->
  <div id="context-menu">
    <ul class="dropdown-menu" role="menu">
      <li>
        <a data-target="#demographicmodal" data-toggle="modal">
          <i class="icon-user"></i> New User </a>
      </li>
      <li>
        <a href="javascript:;">
          <i class="icon-present"></i> New Event
          <span class="badge badge-success">4</span>
        </a>
      </li>
    </ul>
  </div>
</div>

<!-- Modal Content -->
<div id="demographicmodal" class="modal fade" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="row">
          <label data-dismiss="modal" onclick="reloadallergies()" class="fa fa-times pull-right"></label>
        </div>
      </div>
    </div>
  </div>
</div>

I could not able to figure out, why the modal is not working. Pls help me to solve this.

I need to disabled right click and trigger manually the context menu. (My final purpose is to tigger the menu on an AJAX response).

First, I declared my context menu using ignoreRightClick :

$.contextMenu({
    selector : selector,
    items: ...,
    ignoreRightClick: true
});

Then, I bound mouseup to trigger context menu :

$(selector).bind('mouseup', function(e) {
    if (e.button == 2) {
        $(selector).contextmenu();
    }
}

The issue is that my manual trigger is ignored instead of the right click trigger I temporarly fixed it adding a test on the button attribute:

// jquery.contextmenu.js line 190
// ignore right click trigger
if (ignoreThisClick && e.button == 2) {
    ignoreThisClick = false;
    return;
}

Thanks

The issue I ran into is, that the demo example for menu-titles works on static contextmenus but is not working for dynamic created menus. Since you dont have a callback about for the creation of the menu to set the data-attribute. I solved this by passing the menu-title string directly as option parameter, similar to className.

all i did was adding this on creation of the contextmenu if(opt.title) opt.$menu.attr("data-menutitle", opt.title);

I might add a pull request.

…contextmenu in the key event hanlder.

I made this because there was a problem where the contextmenu would steal the key events from a textarea that was in a dialog above the contextmenu. So this is made to see if the target has a zIndex if it dont it tries to find the first offsetparent or parent that have a zIndex and compare this to the contextmenu's zIndex and if the targets zIndex is heigher then it will stop the event handler so that it wont steal key event from the dialog that are above the contextmenu.

I am testing the demo at http://medialize.github.com/jQuery-contextMenu/demo/on-dom-element.html, and have encountered an issue.

1. Right-click on one of the items.
2. Right-click on a different item.

The first menu closes, and the second menu pops up, but only for a moment. After that, nothing on the page can be clicked. When clicking anywhere at this stage, the error log in Firefox says:

Error: TypeError: root.$layer is undefined Source File: http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.js Line: 362

I'm trying to use this plugin for a really long list of items. I've tried using CSS overflow-y:scroll and fixed width, but nope, it doesn't work well cause I've got submenus as well. Any suggested workarounds?

Thanks!

This plugin embeds jQuery UI Position v1.12 (https://github.com/swisnl/jQuery-contextMenu/blob/master/dist/jquery.ui.position.js). This version of jQuery UI is susceptible to Cross Site Scripting and is officially unsupported by jQuery UI.

Upgrading this embedded code to jQuery UI 1.13 closes these known security vulnerabilities.

CVE: https://www.cve.org/CVERecord?id=CVE-2021-41184 / https://security.snyk.io/vuln/SNYK-JS-JQUERYUI-1767175 jQuery UI: https://jqueryui.com

according to the docs: animation:{duration: 250, show: 'fadeIn', hide: 'fadeOut'}``

however during invocation // position and show context menu opt.$menu.css(css)[opt.animation.show](opt.animation.duration, function () {

show() is executed on a string literal.

I try to use custom svg icons in the contextmenu. I try to understand how I could use this instruction (unfortunately I'm new to npm/node.js) https://swisnl.github.io/jQuery-contextMenu/docs/customize.html

In this issue I found the some practical steps: https://github.com/swisnl/jQuery-contextMenu/issues/492:

What icons are you using? Are you trying to add SVG icons? If so so the following (with npm installed ;))

Clone the repository Add the icons to ./src/icons/ Run npm install Run gulp css

(installed node with as snap on my Ubuntu 20.04 system sudo snap install node --classic --channel=16)

$ node --version
v16.15.0
$ npx --version
8.5.5
$ npm --version
8.5.5

npm install results in:

npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/karma
npm ERR!   dev karma@"^5.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer karma@"^4.0.0" from [email protected]
npm ERR! node_modules/karma-qunit
npm ERR!   dev karma-qunit@"^4.0.0" from the root project

After removing "karma-qunit": "^4.0.0", it makes more progress. karma-qunit latest version is 4.1.2, so I would guess it could be resolved, but I have no experience yet, so sure I overlooked the right bits.

After that it throws:

npm ERR! code 127
npm ERR! path /home/user/...<path>..../jQuery-contextMenu/node_modules/fibers
npm ERR! command failed
npm ERR! command sh -c node build.js || nodejs build.js
npm ERR! sh: 1: nodejs: not found

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2022-05-22T13_49_40_095Z-debug-0.log

Probably this is more miss understanding of the npm tool, and not so much jQuery-contextmenu. But external pointers are welcome.

Also gulp build-icons does not deliver. It proposes yarn add gulp because no local gulp is found. Trying this, results in similar error and a lot of extra big amounts of logging of messages.. But as new user of these tools, I do not get the right gist from it.

I've tried adding them like this: icon: 'fa-trash', icon: 'fa fa-trash' or even icon: 'trash'. In the last case I dont see anything like I'm supposed to, but if I prepend it with fa- or fa fa- I can see some sort of squares or other symbols depending on what icon I attempt to add and what browser I use (Firefox in the screenshot), instead of the appropriate icon.

Also the text inexplicably becomes bold (as in well, "bold" in the screenshot) if it's added like this: icon: 'fa-trash'. It does not if it's like this: icon: 'fa fa-trash' (at "italic" in the screenshot).

Font awesome is included and the same icon i.e. trash in this case is successfully rendered elsewhere on the very same page but not in the context menu.

            'bold': {
                name: 'Bold (CTRL+B)',
                icon: 'fa-trash',
                isHtmlName: false,
                callback: function(itemKey, opt, e){
                    document.execCommand('bold', false, null);
                }
            },

This adds the useModal option, defaults to true for the existing behaviour.

With useModal set to false, rather than creating a hidden layer behind the contextmenu to capture closing clicks, uses document.addeventlistener in capture mode.

This allows for propagating click events when clicking in empty space to close the contextmenu (before, only the mousedown event was propagated, and no click was sent since the following mouseup would not be on the same element)

Note useModal = false might break on older browsers, or some features might not work with it anymore (unlikely though).

The repo's v3 branch README has a link to go to the 'v3 docs' but it actually takes you to the v2 docs. See screenshot:

I suspect a decent bit of the confusion is related to this -- the v3 code is much better & is overall just far easier to work with (especially the styling) -- but without documentation, it's a lot of fumbling around to try to figure out what the usage API is.

Personally, I had inadvertently been trying to use v2 syntax with the v3 codebase -- causes me lots of confusion. Much smoother sailing now that I've realized the issue, though unfortunately I'm going to stick with the v2 implementation, at least for now, at least until v3 has some documentation/examples. And maybe it already does and I'm just too dense to find/see them.

Nonetheless -- awesome project. Please don't take this as criticism at all BTW! The project is great and, especially the improvements in v3, it looks fantastic & it absolutely satisfies our requirements & more. If anything, I just wanted to relay my experience in hopes of helping the project & others in the future, even if in a very small way!

Thank you! :)