2016-08-04 20 views
1

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.

Antwort

0

Endlich habe ich festgestellt, dass das Problem in der ersten Bedingung war, nicht in der letzten.

if (e.clientY > ClientH - h) 
    y = offsetY + e.clientY - h; 
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 > ClientH-h? ClientH-h : e.clientY+h/2) ;  

Es sollte universelle Lösung sein. Sehr nützlich, wenn Sie Ihre Box an die aktuelle Ansicht anpassen müssen.

Verwandte Themen