s-yadav / contextmenu.js Goto Github PK

I can't get it to work.
On desktop PC it works correctly.
These are the few options used:

var contextMenuSettings = { method: 'menu', option: { triggerOn: 'click', displayAround: 'cursor', mouseClick: 'right', verAdjust: 15, horAdjust: -20, top: 'auto', left: 'auto', sizeStyle: 'auto', position: 'auto', containment: window } }

Is there anything I'm missing perhaps?
I'm using last version and I've included both .js and .css.

Thanks

Would you consider pulling my request #25 ?

Hi,

We are trying to replace the existing context menu with a new context menu on a button click at the same postion. (parent context menu). We are not able to.

Condition: Position should be dynamic. We need to pass the location and it should not be hard coded.

Kindly let us know if there is any way to achieve this.

Thanks

Multiple elements with the id "iw-tempTxt" are created when opening the contextmenu and they won't be deleted.

I have a trigger element that looks like:

How can i do to close all opened menu instance when opening a new menu (on contextmenu event for example).
Thanks !

The link to the demo in description points to an advertisement webpage. Please update!

http://ignitersworld.com/lab/contextMenu.html
Go to the "Enable/disable menu options" section. Pressing the enable/disable buttons has no effect.
Thanks,
Max

contextMenu is not triggering unless we refresh it for newly appended markup like following

$('a.rtpm_tasks_title').contextMenu('refresh');

I'm loading the menu dynamically in a plugin system. I define 1 function for the fun property of each menu item. There doesn't seem to be a way for me to tell when inside this function what menu item was clicked.

Very nice tool !

I have a small grief, still:

once open, menues are quite invasive (only esc, scroll or click out window make then disappear).
While in most GUI users usually just click out of the menu with any button and that's it.
How to emulate this behavior ?
( and shouldn't it be added to the next version ? )
Or did I miss an option ?

thanks,

First of all: very nice plugin, I love that it's lightweight and has lots of options.

Question: would you consider an option for custom class names when instantiating the menu?

iw- is fine for most users, but one might need a custom namespace, in order to have the generated menu classes synced with existing code/namespacing in their app.

Thanks!

i have UL with LI elements, and this script
var mn2 = [{
name: 'delete',
img: 'images/delete.png',
title: 'to delete this element',
fun: function (event) {
alert(event.target.id+' i am delete this element')
}}]
$('LI').contextMenu(mn2,{triggerOn:'contextmenu','displayAround': 'trigger'});

but i don't cant get the id of original element (LI) that triggered de context menu.

Hi,

Some solution to put a line separator between some items ?

Thanks for advance.

Carles

When contextMenu is binded to a certain div, the checkboxes contained in that div stop working properly. They don't change state when clicked, but still do the little clicking animation.

Here's an example : http://jsfiddle.net/2cqsLfyr/1/

Sorry, my English writing is not really good.

once a function is called by clicking a menu item, the menu will not close until it loses focus. whats the easiset way to force it closed after selecting an option?

please advise?

thanks!

it is great, hope add bower.json.

If the context menu is updated using the .contextMenu('update',menu) function, the click event handlers for the menus dont get the trigger and menu attributes in the pData parameter.

Just downloaded the latest version.

I am testing on a MAC with Safari (11.0.2), Firefox (58.0 (64-bit)) and Chrome (64.0.3282.186)

I have to click twice the first time for menu to appear, after that it is perfect.

my code:

		var sealMenu = [{
				name: 'None',
				fun: function () { changeSeal('None'); }
			}, {
				name: 'Commercial',
				fun: function () { changeSeal('Commercial'); }
			}, {
				name: 'New Listing',
				fun: function () { changeSeal('New Listing'); }
			}, {
				name: 'Open House',
				fun: function () { changeSeal('Open House'); }
			}, {
				name: 'For Rent',
				fun: function () { changeSeal('For Rent'); }
			}, {
				name: 'Rented',
				fun: function () { changeSeal('Rented'); }
			}, {
				name: 'For Sale',
				fun: function () { changeSeal('For Sale'); }
			}, {
				name: 'Sold',
				fun: function () { changeSeal('Sold'); }
			}, {
				name: 'Under Contract',
				fun: function () { changeSeal('Under Contract'); }
		}];
		
		// Add/Switch/Remove Seal
		$(".icon-sold").click(function () {
			$('.icon-sold').contextMenu(sealMenu, {
				displayAround: 'trigger',
				position: 'top',
				horAdjust: -55,
				verAdjust: -100
			        });
                     });			

Hi,
i was trying to use this context menu for left click, in angular js, it works fine on a single div , but if there is a div inside ng-repeat, this doesn't work. is there any solution for this.

As I am using require.js the initialization of the plugin is done in ad-hoc basis(during the trigger of the plugin). Once the popup is triggered the 'click' event is not getting triggered.The function which is binded to the click event is not getting called.Instead all other other events such as 'mousedown','mouseup' are fired.

events:{
"click # : "<function name"
}

: function(){
<--- code goes here --->
}

Thanks,
Ram.

I am not very sure but i didn't find a way to find the original trigger when a menu item is selected for that trigger. I didn't find any example with that feature too. Can you please help me what i can do for it?
I guess the first thing that i would want in context menu selection is the menu item selected & the original element on which this context menu was shown.
Is there anything i missing here?

for example,

before running the code below,
$('div.goo').length is 5,
$('div.goo).contextMenu(menu2,{triggerOn:'contextmenu'});
but after ,i add one div.goo node,but the event on the new one is not effected
my question is how to fix this porblem.
as we know,in jquery ,we can use "$('body').on('click','div.goo',function() {})" to solve "how to   dynamically bind dom evnt",
but in your contextMenu.js，what should i do?

Hi,

How would I go about triggering a menu manually, so not with a mouse event but because of a condition in some jQuery?

Thanks in advance :)
Ben

Hello,

The contextMenu does not display menu text properly.

Here is my setup structure:
var menu = [ { name: 'gantipenempatan', img: '', title: 'Pindah kelas', fun: function() { alert('Pindah kelas :: idkelas = '); } }, { name: 'editkelas', img: '', title: 'Edit kelas', fun: function() { alert('Edit kelas :: idkelas = '); } } ]; $('.menu_kelas').contextMenu(menu);

The context menu shows with 2 menu items. But menu #1 says "gantipenempatan" and menu #2 says "editkelas".

Is there a way to fix this?

Even after setting the option mouseClick to 'right', right click isn't working for me

I am trying to use the contextMenu plugin to create a list of menuTrigger but could not pass the right ID as a suffix to the menuTrigger or the edit menu ID. e.g. I have several comments each of which has its own commentID. I need to create a menuTrigger for each comment and also attach the commentID as a suffix to the menuTriggerID and also the li Edit, li delete ID but every time, I only get the last one as the ID suffix to all of the menuTrigger, Edit or Delete ID in my js file when the Edit or delete button clicked although I see the right ID in the html source code. Not sure if the contextMenu is supposed to work in this kind of case. Please guide me if I need to customize the contextMenu.js.

Most of the examples at http://ignitersworld.com/lab/contextMenu.html no longer work (tested in Chrome 81 - windows) the project founder has stated that this project s/he is no longer supporting. I will try to take a look for other better alternatives, or otherwise think about fixing the code for my purposes

.indexOf function is undefined in IE<9

possible fix use jquery's .inArray()

if ($.inArray( option.triggerOn, ['hover', 'mouseenter', 'mouseover', 'mouseleave', 'mouseout', 'focusin', 'focusout'] ) != -1) {
option.displayAround = 'trigger';
}

hi,

line263 :

trigger.delegate('input,a,.needs-click','click',function(e){ e.stopImmidiatePropagation()});

stopImmidiatePropagation -> stopImmediatePropagation

Hi,

When you're on a tablet not trigger submenus. Would be able to do with a click.¿ Any way to fix this problem?

Thanks for advance.

Carles.

Hi s-yadav,
Your utility is very helpful to me, but I'm having a problem when "updating"... It's a simple menu with three items in it. Here is the JSON:
var menu = [{
name: 'add Range',
disable: 'true',
img: 'images/add_orange_sm.png',
title: 'add Range button',
fun: function () {
fnAddRange();
}
}, {
name: 'delete Range',
disable: 'true',
img: 'images/x_orange.png',
title: 'delete Range button',
fun: function () {
fnDeleteRange();
}
}, {
name: 'delete Item (includes all Ranges)',
// img: 'images/',
title: 'create button',
fun: function () {
fnDeleteItem();
}
}];

When I try to enable a the disabled first item using the following json and javascript:
var updateJson = [{
name: 'add Range',
disable: 'false',
}];
$('.spacerMenu').contextMenu('update', updateJson);

I receive this error:
Uncaught TypeError: Cannot read property 'menu' of undefined (10:46:29:805 | error, javascript)
at (anonymous function) (public_html/js/contextMenu.js:75:36)
at jQuery.extend.each (public_html/js/jquery-1.9.1.js:648:23)
at jQuery.fn.jQuery.each (public_html/js/jquery-1.9.1.js:270:17)
at methods.update (public_html/js/contextMenu.js:72:18)
at $.fn.contextMenu (public_html/js/contextMenu.js:39:25)

The menu is visible when I'm attempting to update it, could that be the source of the problem?
Thanks for the help,
Tyson