Konumlandırma İçeriği Menüsü

Question

jQuery ile bir özel bağlam menüsü konumlandırmaya çalışıyorum.
İlk kez doğru konumda (fare koordinatları) belirir, ancak geçerli konum yeni konumla toplanır, böylece menü ekrandan kaybolur.
İşte JavaScript'tir:

<script> 
$(function(){ 
    $('#box').hide(); 

    $(document).bind("contextmenu", function(e) { 
     $("#box").offset({left:e.pageX, top:e.pageY}); 
     $('#box').show(); 
     e.preventDefault(); 
    }); 

    $(document).bind("click", function(e) { 
     $('#box').hide(); 
    }); 
    $('#box').bind("click", function(e) { 
     $('#box').hide(); 
    }); 
}); 
</script> 

Answer 1

offset yöntemini kullanmayın, denemek css yerine, konumlandırma içerik menüsü kesinlikle:

$("#box").css({left:e.pageX, top:e.pageY}); 

CSS:

#box { 
    ... 
    position: absolute; 
} 

http://jsfiddle.net/smxLk/

Answer 2

Sorun şu ki sağ tıkladıktan sonra başka bir yere tıkladıktan sonra tekrar sağ tıkladığınızda pozisyon yanlış.

Sorunun kökü, öğeyi göstermeden önce ofseti ayarlamanızdır. Öğe display:none olarak ayarlanmışsa jQuery ile karıştırılır ve sonra ofset değiştirilir.

kodunuzda show ve offset hatları geçiş için gereken sorunu çözmek için:

$(document).bind("contextmenu", function(e) { 
    $("#box").offset({left:e.pageX, top:e.pageY}); 
    $('#box').show(); 
    e.preventDefault(); 
}); 

$(document).bind("contextmenu", function(e) { 
    $('#box').show(); 
    $("#box").offset({left:e.pageX, top:e.pageY}); 
    e.preventDefault(); 
}); 

Demo
ve
Source

Answer 3

deneyin pozisyonunu haline gelir: sabit; Aşağıdaki durumuna göre içerik menüsü değişikliklerin konumu ile - Bu arada

var windowHeight = $(window).height()/2; 
var windowWidth = $(window).width()/2; 
if(e.clientY > windowHeight && e.clientX <= windowWidth) { 
    $("#contextMenuContainer").css("left", e.clientX); 
    $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY); 
    $("#contextMenuContainer").css("right", "auto"); 
    $("#contextMenuContainer").css("top", "auto"); 
} else if(e.clientY > windowHeight && e.clientX > windowWidth) { 
    $("#contextMenuContainer").css("right", $(window).width()-e.clientX); 
    $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY); 
    $("#contextMenuContainer").css("left", "auto"); 
    $("#contextMenuContainer").css("top", "auto"); 
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) { 
    $("#contextMenuContainer").css("left", e.clientX); 
    $("#contextMenuContainer").css("top", e.clientY); 
    $("#contextMenuContainer").css("right", "auto"); 
    $("#contextMenuContainer").css("bottom", "auto"); 
} else { 
    $("#contextMenuContainer").css("right", $(window).width()-e.clientX); 
    $("#contextMenuContainer").css("top", e.clientY); 
    $("#contextMenuContainer").css("left", "auto"); 
    $("#contextMenuContainer").css("bottom", "auto"); 
} 

http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/