Ich habe eine div#panel
, die ich verwende, um Informationen über Elternelemente relativ zu dem Element, auf das ich geklickt habe, zu drucken. Dies bedeutet, dass das div-Element keine feste Breite und Höhe hat.Wie kann die Berechnung der Position des Elements verbessert werden?
Ich musste die Position für das Element div # panel berechnen, das mit den CSS-Stilen left
und top
positioniert wird. Mein Ziel ist es, die div#panel
auf dem Bildschirm zu halten, sollte es nicht außerhalb der aktuellen Ansicht/Bildschirm gehen.
Meine Berechnung sieht wie folgt aus:
var ClientW = jQuery(window).width();
var ClientH = jQuery(window).height();
var w = $('div#panel').width();
var h = $('div#panel').height();
var offsetY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var offsetX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
var y, x;
if (e.clientY > ClientH - h)
y = offsetY + ClientH - (e.clientY-ClientH);
else
if (e.clientY < 0 + h)
y = offsetY + e.clientY + (h-e.clientY);
else
y = e.clientY < ClientH/2 ? offsetY + e.clientY - h/2 : offsetY + (e.clientY+h/2 > ClientH-h ? ClientH-h : e.clientY+h/2) ;
x = (e.clientX > ClientW - w/2)?offsetX + ClientW-w : offsetX + e.clientX;
$('#panel').css({ left: x, top: y })
Es funktioniert fast perfekt, aber in der Nähe der Unterseite des Client-Bereich, knapp oberhalb der unteren Bildlaufleiste (20-40px), wird das Element nicht auf den Bildschirm passen . Wenn ich zu nahe an die untere Bildlaufleiste klicke, wird sie unterhalb der Bildlaufleiste verschwinden. Wie kann ich die Berechnung für die y-Position korrigieren oder verbessern?
PS: Ich muss x im Moment nicht korrigieren, weil die Berechnung ähnlich wie y sein soll ... später.