Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Open an extension popup (html list) on right click of node (contextmenu) in visjs

I want to open a extension popup on right click of node in visjs. I tried many things but none seem to be helpful. I want popup to be an ordered list

like image 778
Jubin Mehta Avatar asked Jul 08 '16 04:07

Jubin Mehta


People also ask

How do I create a custom right click menu?

JavaScript code is used to block this default menu and then we will create our custom context menu. To block the default menu, we will add an event handler for processing right-click events on the webpage. We will use the oncontextmenu property to listen to the right-click events.

What is Contextmenu in JavaScript?

The contextmenu event fires when the user attempts to open a context menu. This event is typically triggered by clicking the right mouse button, or by pressing the context menu key.

How do you create a context menu in HTML?

The contextmenu attribute specifies a context menu for an element. The context menu appears when a user right-clicks on the element. The value of the contextmenu attribute is the id of the <menu> element to open.


1 Answers

A really good explanation of how to create a context menu can be found here.

Below is the relevant JS code for vis.js using the linked example.

With your vis.Network var, assuming it's called network:

network.on("oncontext", function (params) {

    params.event.preventDefault();
    $(".custom-menu").finish().toggle(100);
    $(".custom-menu").css({
        top: params.event.pageY + "px",
        left: params.event.pageX + "px"
    });
});

Hope this helps.

like image 62
Jeff Avatar answered Oct 18 '22 22:10

Jeff