How to show the context menu in actual position ?

Hii all;

I am created a context menu inside my page; and it's working also fine but the problem is the context menu not showing exact position where i clicked; some time it showing below or some time far away from my clicked place.

Below is the code what i tried :-

<ul class='rightClick-menu'>
<li data-action="Edit">Editli>
<li data-action="Delete">Deleteli>
ul>

Then in page i have div and inside the div when i clicked i want to show this context menu.

<div class='resize' style='width:500px;height:700px;border:1px solid black'>
div>

Now the Java Script code what i written is :-

$(".resize").bind("contextmenu", function (e) {//This method and just bellow mehthod "mousedown" both are used to open menu on r8clik of mouse.
debugger;
// Avoid the real one
var posx=0;
var poxy=0;
e.preventDefault();
mainDiv=$(this);
var offset = $(this).offset();
positionMenu(e);
});
$(".resize").bind("mousedown", function (e) {
debugger;
// If the clicked element is not the menu
DashletId = $(this).attr('data-value');
maindivid = $(this).attr('id');
mainDiv=$(this);
if (!$(e.target).parents(".rightClick-menu").length > 0) {
// Hide it
$(".rightClick-menu").hide(100);
}
});
function getPosition(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
} else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return {
x: posx,
y: posy
}
}
function positionMenu(e) {
clickCoords = getPosition(e);
var clickCoordsX = clickCoords.x;
var clickCoordsY = clickCoords.y;
var menu= document.querySelector(".rightClick-menu");
menuWidth = menu.offsetWidth + 4;
menuHeight = menu.offsetHeight + 4;
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
if ( (windowWidth - clickCoordsX) < menuWidth ) {
var leftMenu = windowWidth - menuWidth + "px";
} else {
leftMenu = clickCoordsX + "px";
}
if ( (windowHeight - clickCoordsY) < menuHeight ) {
var menuTop = windowHeight - menuHeight + "px";
} else {
menuTop= clickCoordsY + "px";
}
$(".rightClick-menu").finish().toggle(100).css({top:menuTop,left:leftMenu});
}

CSS :-

.rightClick-menu {
display: none;
/*z-index: 1000;*/
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
}

So problem is not getting context menu in actual place where user clicked.

Any Idea how to solve this ?

Thanks.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Vinay Singh10y ago
Hi
It is hard to tell you the problem have a look of the below link. it works fine for me. this help you.
just try ones
https://swisnl.github.io/jQuery-contextMenu/demo.html
http://jsfiddle.net/u2kJq/241/