Surya Kant

Surya Kant

  • 943
  • 1.7k
  • 520.1k

How to show the context menu in actual position ?

Jun 9 2016 2:00 AM

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 :-

  1. <ul class='rightClick-menu'>  
  2.         <li data-action="Edit">Edit</li>  
  3.         <li data-action="Delete">Delete</li>  
  4.     </ul> 
 Then in page i have div and inside the div when i clicked i want to show this context menu.
  1. <div class='resize' style='width:500px;height:700px;border:1px solid black'>  
  2. </div> 
 Now the Java Script code what i written is :-
  1. $(".resize").bind("contextmenu"function (e) {//This method and just bellow mehthod "mousedown" both are used to open menu on r8clik of mouse.  
  2.                     debugger;  
  3.                     // Avoid the real one  
  4.                     var posx=0;  
  5.                     var poxy=0;  
  6.                     e.preventDefault();  
  7.                     mainDiv=$(this);  
  8.                     var offset = $(this).offset();  
  9.                     positionMenu(e);  
  10.   
  11.                 });  
  12.                 $(".resize").bind("mousedown"function (e) {  
  13.                     debugger;  
  14.                     // If the clicked element is not the menu  
  15.                     DashletId = $(this).attr('data-value');  
  16.                     maindivid = $(this).attr('id');  
  17.                     mainDiv=$(this);  
  18.                     if (!$(e.target).parents(".rightClick-menu").length > 0) {  
  19.   
  20.                         // Hide it  
  21.                         $(".rightClick-menu").hide(100);  
  22.                     }  
  23.                 });  
  24.   
  25.   function getPosition(e) {  
  26.             var posx = 0;  
  27.             var posy = 0;  
  28.   
  29.             if (!e) var e = window.event;  
  30.   
  31.             if (e.pageX || e.pageY) {  
  32.                 posx = e.pageX;  
  33.                 posy = e.pageY;  
  34.             } else if (e.clientX || e.clientY) {  
  35.                 posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;  
  36.                 posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;  
  37.             }  
  38.   
  39.             return {  
  40.                 x: posx,  
  41.                 y: posy  
  42.             }  
  43.         }  
  44.         function positionMenu(e) {  
  45.             clickCoords = getPosition(e);  
  46.             var clickCoordsX = clickCoords.x;  
  47.             var clickCoordsY = clickCoords.y;  
  48.             var menu= document.querySelector(".rightClick-menu");  
  49.             menuWidth = menu.offsetWidth + 4;  
  50.             menuHeight = menu.offsetHeight + 4;  
  51.   
  52.             windowWidth = window.innerWidth;  
  53.             windowHeight = window.innerHeight;  
  54.   
  55.             if ( (windowWidth - clickCoordsX) < menuWidth ) {  
  56.                 var leftMenu = windowWidth - menuWidth + "px";  
  57.   
  58.             } else {  
  59.                 leftMenu = clickCoordsX + "px";  
  60.   
  61.             }  
  62.   
  63.             if ( (windowHeight - clickCoordsY) < menuHeight ) {  
  64.                 var menuTop = windowHeight - menuHeight + "px";  
  65.   
  66.             } else {  
  67.                 menuTop= clickCoordsY + "px";  
  68.   
  69.             }  
  70.             $(".rightClick-menu").finish().toggle(100).css({top:menuTop,left:leftMenu});  
  71.         } 
 CSS :-
  1. .rightClick-menu {  
  2.     display: none;  
  3.     /*z-index: 1000;*/  
  4.     position: absolute;  
  5.     overflow: hidden;  
  6.     border: 1px solid #CCC;  
  7.     white-space: nowrap;  
  8.     font-family: sans-serif;  
  9.     background: #FFF;  
  10.     color: #333;  
  11.     border-radius: 5px;  

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

Any Idea how to solve this ?

Thanks.


Answers (1)