I have an issue with my context menu, which is viewable through right clicking, when you scroll down, it does not maintain a regular position, meaning when you don’t scroll, it shows up at the right of your mouse, like usual. But when I scroll down, it shows up below the mouse depending on how far you scroll. I have tried using clientY and scrollY, however these dont seem to fix the issue. Here Is a code snippet.
// Function to show the custom context menu with sliding effect
function showContextMenu(x, y) {
var menu = document.querySelector(".ctx-context-menu");
// Check if the menu is already visible
if (menu.classList.contains("ctx-menu-visible")) {
// Apply sliding transition
menu.classList.add("ctx-menu-slide");
menu.style.left = x + "px";
menu.style.top = y + "px";
// Remove sliding transition after it's done
setTimeout(function () {
menu.classList.remove("ctx-menu-slide");
}, 500); // Match the duration of the slide transition
} else {
// Position the menu at the new coordinates without animation
menu.style.left = x + "px";
menu.style.top = y + "px";
// Fade in the menu
menu.classList.add("ctx-menu-visible");
}
}
// Function to hide the custom context menu
function hideContextMenu() {
var menu = document.querySelector(".ctx-context-menu");
// Start the fade-out effect
menu.classList.remove("ctx-menu-visible");
}
// Event listener for right-click event
document.addEventListener("contextmenu", function (e) {
var menu = document.getElementById("ctxContextMenu");
// Check if the right-click was inside the menu
if (menu.contains(e.target)) {
// Do nothing if the right-click is inside the menu
return;
}
e.preventDefault(); // Prevent the default context menu from showing
showContextMenu(e.pageX, e.pageY); // Show the custom context menu at the mouse position
});
// Event listener for click event to hide the custom context menu
document.addEventListener("click", function (e) {
var menu = document.getElementById("ctxContextMenu");
// Check if the click was outside the menu
if (!menu.contains(e.target)) {
hideContextMenu(); // Hide the custom context menu
}
});
// Prevent the default context menu from showing when right-clicking on the custom context menu
document.getElementById("ctxContextMenu").addEventListener("contextmenu", function (e) {
e.preventDefault(); // Prevent the default context menu from showing
});
// Optional: Event listener for the escape key to hide the custom context menu
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") {
hideContextMenu(); // Hide the custom context menu
}
});/* context menu begin */
.ctx-context-menu {
opacity: 0;
position: fixed;
z-index: 10000;
width: 150px;
background-color: #1a1a1a;
border: 2px solid #ff0000;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
padding: 10px 0;
transition: opacity 0.15s linear; /* Only for opacity */
pointer-events: none; /* Prevents clicks while hidden */
}
.ctx-menu-slide {
transition: left 0.25s, top 0.25s; /* Only for sliding */
}
.ctx-menu-visible {
opacity: 1;
pointer-events: auto; /* Allows clicks when visible */
/* No transition here, it will be handled in JavaScript */
}
.ctx-context-menu-item {
color: #808080;
cursor: pointer;
text-decoration: none;
transition: color 0.15s linear;
}
.ctx-context-menu-item:hover {
color: #ff00ff;
}
/* context menu end */<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=2" />
<title>Cratex Studios</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous" />
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous" />
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico" />
<link href="assets/css/style.css" rel="stylesheet" />
</head>
text to make the page scollable:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper a lacus vestibulum sed arcu non. Nulla malesuada pellentesque elit eget gravida. Nisl rhoncus mattis rhoncus urna neque viverra. Dictum sit amet justo donec enim diam. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Consectetur libero id faucibus nisl tincidunt. Odio tempor orci dapibus ultrices in iaculis nunc. Eu lobortis elementum nibh tellus molestie. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
Nisi lacus sed viverra tellus in hac. Orci porta non pulvinar neque laoreet suspendisse. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Est ultricies integer quis auctor elit sed vulputate. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Gravida neque convallis a cras semper. Sagittis nisl rhoncus mattis rhoncus urna. Nullam eget felis eget nunc lobortis mattis. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Congue eu consequat ac felis. Dui sapien eget mi proin sed libero.
Mus mauris vitae ultricies leo. Morbi leo urna molestie at elementum. Proin sed libero enim sed faucibus turpis in. Suscipit tellus mauris a diam maecenas sed. Elit ullamcorper dignissim cras tincidunt. Cursus risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Magna etiam tempor orci eu lobortis elementum nibh tellus molestie. Semper auctor neque vitae tempus quam pellentesque nec. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Habitasse platea dictumst quisque sagittis purus sit.
Sed arcu non odio euismod lacinia at quis risus sed. Ultrices sagittis orci a scelerisque purus semper eget duis. Venenatis lectus magna fringilla urna porttitor. Auctor elit sed vulputate mi sit amet mauris commodo quis. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. At augue eget arcu dictum. Nunc congue nisi vitae suscipit tellus mauris a diam maecenas. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Lacus suspendisse faucibus interdum posuere lorem ipsum. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Ullamcorper sit amet risus nullam eget felis eget.
Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Posuere urna nec tincidunt praesent semper. Vivamus arcu felis bibendum ut tristique et egestas. Odio pellentesque diam volutpat commodo. Senectus et netus et malesuada fames ac turpis egestas integer. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Hac habitasse platea dictumst quisque sagittis purus sit. Eu turpis egestas pretium aenean pharetra magna ac placerat. Non pulvinar neque laoreet suspendisse interdum consectetur libero. Nullam eget felis eget nunc lobortis mattis aliquam. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Amet nulla facilisi morbi tempus iaculis urna id. Nam libero justo laoreet sit amet cursus sit. Fringilla urna porttitor rhoncus dolor purus. Imperdiet nulla malesuada pellentesque elit eget gravida cum. Nunc eget lorem dolor sed. Gravida cum sociis natoque penatibus et.
Aliquam vestibulum morbi blandit cursus risus. Tincidunt tortor aliquam nulla facilisi cras fermentum. At consectetur lorem donec massa sapien faucibus et molestie ac. In eu mi bibendum neque egestas congue. Sed viverra tellus in hac habitasse. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Adipiscing commodo elit at imperdiet dui. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Accumsan lacus vel facilisis volutpat est velit. Imperdiet massa tincidunt nunc pulvinar. Dui ut ornare lectus sit amet est placerat. Netus et malesuada fames ac turpis egestas integer eget aliquet. Dignissim diam quis enim lobortis scelerisque fermentum. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Ligula ullamcorper malesuada proin libero. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Feugiat scelerisque varius morbi enim nunc faucibus. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor.
Nunc non blandit massa enim nec dui nunc mattis enim. Eget nulla facilisi etiam dignissim diam quis. Aliquet sagittis id consectetur purus ut. Ut tellus elementum sagittis vitae et leo duis. Ut sem viverra aliquet eget. Adipiscing bibendum est ultricies integer quis auctor elit. Pellentesque eu tincidunt tortor aliquam. Adipiscing vitae proin sagittis nisl rhoncus. Turpis cursus in hac habitasse platea dictumst. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Enim praesent elementum facilisis leo vel. Posuere lorem ipsum dolor sit. Amet luctus venenatis lectus magna fringilla urna porttitor. Vitae et leo duis ut diam. Tellus orci ac auctor augue mauris augue neque gravida. Magna eget est lorem ipsum dolor.
Tristique risus nec feugiat in fermentum posuere urna. Cursus euismod quis viverra nibh cras pulvinar mattis nunc sed. Posuere urna nec tincidunt praesent semper feugiat nibh sed. Quis blandit turpis cursus in hac. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Integer feugiat scelerisque varius morbi. Congue eu consequat ac felis donec et odio pellentesque. Donec enim diam vulputate ut pharetra sit amet aliquam. Maecenas pharetra convallis posuere morbi.
Commodo odio aenean sed adipiscing diam donec adipiscing. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Nulla pellentesque dignissim enim sit amet venenatis. Enim sit amet venenatis urna cursus eget. Id volutpat lacus laoreet non curabitur gravida arcu ac. Arcu vitae elementum curabitur vitae nunc sed. Cursus euismod quis viverra nibh. Eu lobortis elementum nibh tellus molestie nunc. Venenatis a condimentum vitae sapien. At ultrices mi tempus imperdiet. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sed vulputate odio ut enim blandit. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus. Tellus elementum sagittis vitae et leo duis ut. Aliquet nibh praesent tristique magna sit amet purus gravida. Platea dictumst vestibulum rhoncus est pellentesque elit. Euismod lacinia at quis risus sed vulputate odio ut enim. Diam quis enim lobortis scelerisque. Sit amet facilisis magna etiam.
Tristique senectus et netus et malesuada fames. Ultrices dui sapien eget mi proin sed. Sit amet facilisis magna etiam tempor orci. Commodo sed egestas egestas fringilla phasellus faucibus. Pharetra et ultrices neque ornare aenean euismod elementum. Sapien eget mi proin sed libero enim sed faucibus turpis. Hendrerit gravida rutrum quisque non. Sem nulla pharetra diam sit amet. Viverra orci sagittis eu volutpat odio facilisis. Maecenas accumsan lacus vel facilisis. Cras sed felis eget velit aliquet sagittis id. Sed cras ornare arcu dui vivamus arcu. Amet aliquam id diam maecenas ultricies. Sed felis eget velit aliquet sagittis id.
Vel orci porta non pulvinar neque. Tortor condimentum lacinia quis vel. Duis ut diam quam nulla porttitor massa id neque aliquam. Amet dictum sit amet justo. Pellentesque adipiscing commodo elit at imperdiet dui accumsan. Libero nunc consequat interdum varius sit amet. Ornare massa eget egestas purus viverra accumsan. Sagittis orci a scelerisque purus semper. Arcu non sodales neque sodales ut etiam sit. Arcu felis bibendum ut tristique et. Tincidunt id aliquet risus feugiat in ante metus. Mauris a diam maecenas sed enim. Magnis dis parturient montes nascetur ridiculus mus mauris. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna.
Id eu nisl nunc mi ipsum faucibus vitae aliquet. Nulla pellentesque dignissim enim sit. Tellus in metus vulputate eu scelerisque felis. Mattis molestie a iaculis at erat. Elit eget gravida cum sociis natoque penatibus et magnis dis. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Urna nunc id cursus metus aliquam eleifend mi in nulla. Mauris a diam maecenas sed enim ut sem viverra aliquet. Lectus sit amet est placerat in. Euismod nisi porta lorem mollis aliquam ut. Elit sed vulputate mi sit amet mauris.
Volutpat lacus laoreet non curabitur gravida arcu. Sem et tortor consequat id porta nibh venenatis. Ut aliquam purus sit amet luctus venenatis lectus. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Elementum integer enim neque volutpat ac tincidunt vitae. Vulputate mi sit amet mauris. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Semper viverra nam libero justo laoreet sit amet cursus sit. Feugiat pretium nibh ipsum consequat nisl vel pretium. Ac ut consequat semper viverra nam.
Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Amet nisl suscipit adipiscing bibendum est ultricies. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi etiam. Ultrices tincidunt arcu non sodales neque sodales ut. Felis bibendum ut tristique et. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Aliquet eget sit amet tellus cras adipiscing enim eu. Sollicitudin nibh sit amet commodo nulla facilisi. Auctor augue mauris augue neque gravida. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Lacus laoreet non curabitur gravida arcu ac tortor dignissim. Purus ut faucibus pulvinar elementum. Pellentesque dignissim enim sit amet venenatis urna cursus. Tempor nec feugiat nisl pretium fusce id. Lorem mollis aliquam ut porttitor leo a. Aliquet risus feugiat in ante metus dictum at tempor commodo. Sit amet nisl suscipit adipiscing bibendum. Neque sodales ut etiam sit. Amet nisl suscipit adipiscing bibendum. Turpis egestas maecenas pharetra convallis posuere morbi leo urna molestie.
Morbi tristique senectus et netus et malesuada fames ac turpis. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Massa sapien faucibus et molestie ac feugiat sed. Quam id leo in vitae turpis massa sed elementum tempus. Vivamus arcu felis bibendum ut tristique et egestas quis. Dolor sed viverra ipsum nunc. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Dictumst quisque sagittis purus sit amet. In mollis nunc sed id semper risus. Velit ut tortor pretium viverra suspendisse potenti nullam. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Mollis nunc sed id semper risus in hendrerit gravida rutrum.
</p>
<nav id="ctxContextMenu" class="ctx-context-menu">
<ul class="navbar-nav text-center gap-2">
<li>
<a class="ctx-context-menu-item text-center mx-2">First Action</a>
</li>
<hr class="m-0 mx-2" />
<li>
<a class="ctx-context-menu-item text-center mx-2">Second Action</a>
</li>
<hr class="m-0 mx-2" />
<li>
<a class="ctx-context-menu-item text-center mx-2">Third Action</a>
</li>
</ul>
</nav>
</html>I am trying to make a custom context menu, to replace the default context menu by the browser.
2