Správný výpočet pozice divu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Pracuji na addonu pro Firefox (napsané v JS). Program dělá následující, klikneš na element na stránce a zorazí se ti výpis s informacemi o elementu. K tomu používám div#panel a jquery. V panelu je tedy ten výpis. Problém nastává, když je výpis moc dlouhý. Například na seznam.cz kliknu na element

INPUT  id='fulltext-field'

a když se zobrazí všechny informace od rodičů až po tento input včetně atributů tak už mi div přesahuje do záporných hodnot na ose y. Ještě horší to je když jdu níže, scrollu níž a kliknu a nic se mi nezobrazí nebo to prostě zmizelo asi někam moc nahoru na začátek stránky nebo do záporných hodnot.

Výpočet:

var ClientW = jQuery(window).width();
var ClientH = jQuery(window).height();  

// následuje smyčka která vkládá informace do div#panel ul

// dále výpočet pozice

var w = $('div#make_it_easy_panel').width();
var h = $('div#make_it_easy_panel').height();
var y = (e.clientY > ClientH - h )?ClientH-h*2:e.clientY-h;
var x = (e.clientX > ClientW - w )?ClientW-w:e.clientX;   
// Pak už jen pozicování divu

$('#panel').css({ left: x, top: y })

Mým záměrem bylo udělat to tak, aby div byl nad pozicí myší pokud je tam dost místa.

Anebo aby byl pod pozicí myší pokud je tam dost místa.

Prostě jde o to, aby byl vidět celý element div a nezasahovalo to do oblasti kam jsem klikl.

Obrázky:

http://oi68.tinypic.com/122oqdj.jpg

http://oi66.tinypic.com/hwwnl2.jpg

Tuším že problém je v tom že nastavuji left: a right: absolutní pozici od začátku dokumentu. Ale $(element).height() nastavuji číslo které se vztahuje pouze k aktuální obrazovce. Jak bych mohl zjistit jaká je vzdálenost od začátku dokumentu až po začátek aktuální obrazovky (levý horní okraj obrazovky)?

Přišel jsem na to jak zjistit pozici levého horního rohu aktuální obrazovky, takže když kliknu tak div se zobrazí poblíž kurzoru myši, ale ještě mám problém s tím, že když kliknu poblíž dolního scollbaru tak mi zmizí div#panel dole pod scrollbarem

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 })

Jde o poslední část této podmínky:

y = e.clientY < ClientH/2 ? offsetY + e.clientY - h/2 : offsetY + ( e.clientY+h/2 > ClientH-h ? ClientH-h : e.clientY+h/2 ) ;
Kde zjišťuji jestli je  aktuální pozice myši větší než polovina výšky panelu (h). Pokud je vyšší odečtu výšku panelu (h). Pokud není vyšší přičtu polovinu panelu. A právě v tady té poslední podmínce "pokud je vyšší" je asi chyba jako by se nepočítalo s výško toho posuvníku. Nějakých cca 20px a kvůli tomu se k pozici prvku výška přičte místo odečte.

Máte nějaký nápad jak to opravit?