I have a problem with the context menu. When I click on any place on the page, the location of the context menu is correct, while when I click on any cell in the table, the context menu is far from the place I clicked. Click on it inside the crescent of the table.
//Html Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="cont.css">
<!-- <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"> -->
</head>
<body>
<table id="data-table">
<thead>
<tr id="table-header">
<th data-column="ALARM_DESC" data-order="asc">
ALARM_DESC
<div class="resize-handle"></div>
</th>
<th data-column="ALARM_NAME" data-order="asc">
ALARM_NAME
<div class="resize-handle"></div>
</th>
<th data-column="APPLICAITON" data-order="asc">
APPLICAITON
<div class="resize-handle"></div>
</tr>
</thead>
<tbody id="table-body">
<tr class="high-priority" style="">
<td class="ALARM_DESC">sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj</td>
<td class="ALARM_NAME">utilization w 235421235334</td>
<td class="APPLICAITON">SiteScope</td>
</tr>
<tr class="high-priority" style="">
<td class="ALARM_DESC">sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj</td>
<td class="ALARM_NAME">utilization w sdfdsf</td>
<td class="APPLICAITON">SiteScope</td>
</tr>
<tr class="high-priority" style="">
<td class="ALARM_DESC">sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj</td>
<td class="ALARM_NAME">utilization w 235424</td>
<td class="APPLICAITON">SiteScope</td>
</tr>
<tr class="high-priority" style="">
<td class="ALARM_DESC">sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj</td>
<td class="ALARM_NAME">utilization w sdfdsf</td>
<td class="APPLICAITON">SiteScope</td>
</tr>
<tr class="high-priority" style="">
<td class="ALARM_DESC">sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj</td>
<td class="ALARM_NAME">utilization w 235424</td>
<td class="APPLICAITON">SiteScope</td>
</tr>
</tbody>
<!-- <h3>dddffd</h3> -->
</table>
<div class="wrapper_contextMenu">
<div class="content_context">
<ul class="menu">
<li class="item">
<img src="cursor (1).png" style="height: 30px;" alt="">
<span>Preview</span>
</li>
<li class="item">
<img src="cursor (1).png" style="height: 30px;" alt="">
<span>Preview</span>
</li>
<li class="item">
<img src="cursor (1).png" style="height: 30px;" alt="">
<span>Preview</span>
</li>
<li class="item share">
<div>
<!-- <i class="uil uil-share"></i> -->
<img src="cursor (1).png" style="height: 30px;" alt="">
<span>Share</span>
</div>
<!-- <i class="uil uil-angle-right"></i> -->
<ul class="share-menu">
<li class="item">
<i class="uil uil-twitter-alt"></i>
<span>Twitter</span>
</li>
<li class="item">
<i class="uil uil-instagram"></i>
<span>Instagram</span>
</li>
<li class="item">
<i class="uil uil-dribbble"></i>
<span>Dribble</span>
</li>
<li class="item">
<i class="uil uil-telegram-alt"></i>
<span>Telegram</span>
</li>
</ul>
<!-- </li> -->
<li class="item">
<img src="cursor (1).png" style="height: 30px;" alt="">
<span>Get Link</span>
</li>
<li class="item">
<img src="cursor (1).png" style="height: 30px;" alt="">
<span>Rename</span>
</li>
<li class="item">
<img src="cursor (1).png" style="height: 30px;" alt="">
<span>Delete</span>
</li>
</ul>
<div class="setting">
<li class="item">
<img src="cursor (1).png" style="height: 30px;" alt="">
<span>Settings</span>
</li>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="cont.js"></script>
</body>
</html>
// my Css Code
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 100vh;
background: linear-gradient(135deg, #8B55E9 0%, #5D6BE6 100%)
}
.selected{
background-color: aqua;
}
.wrapper_contextMenu{
visibility: hidden;
position: absolute;
width: 230px;
border-radius: 10px;
background: #fff;
box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
.wrapper_contextMenu .menu{
padding: 10px 12px;
}
.content_context .item{
list-style: none;
font-size: 22px;
height: 35px;
display: flex;
width: 100%;
cursor: pointer;
align-items: center;
border-radius: 5px;
margin-bottom: 2px;
padding: 0 5px 0 10px;
}
.content_context .item:hover{
background: #f2f2f2;
}
.content_context .item span{
margin-left: 8px;
font-size: 15px;
}
.content_context .setting{
display: flex;
margin-top: -5px;
padding: 5px 12px;
border-top: 1px solid #ccc;
}
.content_context .share{
position: relative;
justify-content: space-between;
}
.share .share-menu{
position: absolute;
background: #fff;
width: 200px;
right: -200px;
top: -35px;
padding: 13px;
opacity: 0;
pointer-events: none;
border-radius: 10px;
box-shadow: 0 5px 10px rgba(0,0,0,0.08);
transition: 0.2s ease;
}
.share:hover .share-menu{
opacity: 1;
pointer-events: auto;
}
//Js Code
$(document).ready(function(){
const contextMenu = $(".wrapper_contextMenu");
$(document).on("contextmenu", function(e) {
e.preventDefault();
let x = e.offsetX,
y = e.offsetY,
winWidth = window.innerWidth,
winHeight = window.innerHeight,
cmWidth = contextMenu.width(),
cmHeight = contextMenu.height();
x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;
contextMenu.css({
left: `${x}px`,
top: `${y}px`,
visibility: "visible"
});
});
$(document).on("click", function() {
contextMenu.css("visibility", "hidden");
});
$("#data-table").on("click", function(e) {
if (!e.ctrlKey && $(e.target).prop("tagName") !== "TD") {
const selectedRows = $("#data-table .selected");
selectedRows.removeClass("selected");
}
});
$("#data-table").on("click", "td", function(e) {
if (e.ctrlKey) {
const tr = $(e.target).closest("tr");
tr.addClass("selected");
console.log(tr);
}
});
$(document).on("click", function(e) {
if (!e.ctrlKey && $(e.target).prop("tagName") !== "TD") {
const selectedRows = $("#data-table .selected");
selectedRows.removeClass("selected");
}
});
});
Iam Tried To Edit this Code
const contextMenu = $(".wrapper_contextMenu");
$(document).on("contextmenu", function(e) {
e.preventDefault();
let x = e.offsetX,
y = e.offsetY,
winWidth = window.innerWidth,
winHeight = window.innerHeight,
cmWidth = contextMenu.width(),
cmHeight = contextMenu.height();
x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;
contextMenu.css({
left: `${x}px`,
top: `${y}px`,
visibility: "visible"
});
});
but same reasult