Could anyone assist me in positioning my personalized Context Menu beside my cursor?

Question

Could anyone assist me in positioning my personalized Context Menu beside my cursor?

If possible, I would appreciate some assistance with my custom context menu. It may require some minor tweaks or a fresh idea on how to address the issue. Ideally, I would like to keep the HTML and CSS somewhat unchanged.

[I'm not sure what to write here, but Stack Overflow suggested adding more text due to the amount of code present, so please disregard this text in square brackets.]

HTML:

    <!-- ----------------------------------------- [CONTEXT MENU] ----------------------------------------- -->
    <div id="context-menu">
        <div class="item-title" id="context-menu-title">
            <i></i>
            <h1>Quick Access:</h1>
        </div>
        […]
    </div>

CSS:

/*--------------- [CONTEXT MENU] ---------------*/

#context-menu {
    position: fixed;
    z-index: 10000;
    width: 150px;
    background: #494949;
    transform: scale(0);
    […]
}

[item details have been abbreviated for brevity]

#context-menu hr {
    margin: 2px;
    border-color: #555;
}

JS:

//----------------------------------------- [CONTEXT MENU] -----------------------------------------

const hoverContacts = document.getElementById("contextMenuContact")
[JS functionality has been condensed for summary]

Thank you for your Support!</p>
}

javascript html css responsive contextmenu

Answer 1

Answer №1

Here's an updated suggestion you can try out. Keep in mind that it may not work well on all browsers.

For more information, check out: How to disable right-click context-menu in JavaScript

// html
<body oncontextmenu="handleOnContextMenu()">...</div>

// You might want to set it on your div as well, but I'm not entirely sure 
<div class="your-div" oncontextmenu="handleOnContextMenu()">...</div>

// js
function openCustomContext(x, y) {
  const yourCtxElement = document.getElementById('ctx-menu')
  yourCtxElement.style.top = y + 'px';
  yourCtxElement.style.left = x + 'px';
}

function handleOnContextMenu(e) {
  e.preventDefault();

  const x = e.clientX;
  const y = e.clientY;

  openCustomContext(x, y)
}

Alternatively, you can add it like this with a listener:

window.addEventListener('contextmenu', function (e) { 
  e.preventDefault(); 

  // get X/Y coordinates here...
  const x = e.clientX;
  const y = e.clientY;
  openCustomContext(x, y);
}, false);

Answer 2

Here's an updated suggestion you can try out. Keep in mind that it may not work well on all browsers.

For more information, check out: How to disable right-click context-menu in JavaScript

// html
<body oncontextmenu="handleOnContextMenu()">...</div>

// You might want to set it on your div as well, but I'm not entirely sure 
<div class="your-div" oncontextmenu="handleOnContextMenu()">...</div>

// js
function openCustomContext(x, y) {
  const yourCtxElement = document.getElementById('ctx-menu')
  yourCtxElement.style.top = y + 'px';
  yourCtxElement.style.left = x + 'px';
}

function handleOnContextMenu(e) {
  e.preventDefault();

  const x = e.clientX;
  const y = e.clientY;

  openCustomContext(x, y)
}

Alternatively, you can add it like this with a listener:

window.addEventListener('contextmenu', function (e) { 
  e.preventDefault(); 

  // get X/Y coordinates here...
  const x = e.clientX;
  const y = e.clientY;
  openCustomContext(x, y);
}, false);

Could anyone assist me in positioning my personalized Context Menu beside my cursor?

Answer №1

Similar questions

Expand the table in the initial state by using CSS to collapse the tree

Transferring information from a client-side JavaScript to a Node.js Express server and receiving back

I'm having trouble getting my paragraph to center with both Bootstrap 4's margin:auto and text

Guide to activating the 'Next' button on WP Forms using JavaScript code when certain conditions are fulfilled

What is the advantage of not importing related modules?

Tips on setting the ajax parameter contentType to "html"

handling events by invoking wrapped asynchronous functions within the Meteor framework

What measures can be taken to guarantee that a user is only able to delete designated records?

What is the best way to add several icons at once?

Text that appears automatically in an input field

An unexpected identifier error occurred following an Ajax request

Hover over to disable inline styling and restore default appearance

Seamlessly Loading Comments onto the Page without Any Need for Refresh

Unexpected issue with sliding menu toggle implementation

Unable to transfer specified row data from material-ui datagrid to a function

Encountered an Error: Trying to use a function that is undefined - While utilizing Jquery Tabs

Issue with JavaScript function not triggering in Internet Explorer

Choosing several checkboxes and populating an array with values - HTML and JavaScript

What could be causing ReactNative Dimensions component to display lower resolutions?

Overflow of nested item within flex container