Správný výpočet pozice divu – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Toto vlákno bylo označeno za vyřešené.
Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
oxidián0
Věrný člen
2. 8. 2016   #1
-
0
-

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

Nahlásit jako SPAM
IP: 78.45.87.–
Reklama
Reklama
oxidián0
Věrný člen
3. 8. 2016   #2
-
0
-

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

Nahlásit jako SPAM
IP: 78.45.87.–
oxidián0
Věrný člen
4. 8. 2016   #3
-
0
-

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?

Nahlásit jako SPAM
IP: 78.45.87.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 45 hostů

Podobná vlákna

Prohozeni pozice divu — založil jupin

Správny zápis return... — založil Anonymní uživatel

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý