SCROLL/možnosti: u DIVu (ve srovnání s dokumentem) – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

SCROLL/možnosti: u DIVu (ve srovnání s dokumentem) – JavaScript, AJAX, jQuery – Fórum – Programujte.comSCROLL/možnosti: u DIVu (ve srovnání s dokumentem) – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Petroff0
Věrný člen
28. 8. 2007   #1
-
0
-

V dokumentu se dá (pomocí odkazů - bez použití JS) rolovat dlouhým dokumentem s výsledkem:
--> Vybraný prvek opatřený id nebo name(u a=kotvy) atributem je zobrazen.

Lze totéž zprovoznit pomocí JS pro blok se scrollbarem pro určité (popř. mající nějaký atribut) prvky v jeho txt. obsahu ?
Pokud ne - lze testovat, jestli je prvek viditelný (nebo je skrytý mimo view svého containeru) ?

Nahlásit jako SPAM
IP: ...–
Reklama
Reklama
28. 8. 2007   #2
-
0
-

Viditelnost - jedine co muzes kontrolovat primo je hodnota display a visible. Pak ale tame muzes myslim ze pomoci hodnoty (snad jakehokoliv) HTML prvku scrollTop a pak to dopocitat, za predpokladu, ze znas vysku prvku (coz znas). Jinak na rolovani pomoci js se AFAIK pouziva margin - proste ho zvetsujes-zmensujes az do aleluja, a tim vytvaris iluzi rolovani.

Nahlásit jako SPAM
IP: ...–
Prosím, jestli potřebujete s něčím poradit,zeptejte se na fóru. Jakýkoliv bezdůvodný pokus mě kontaktovat skončí okamžitým přidáním do ignore listu![br][br] Současný počet osob, které to nepochopily: 7
Prog.0
Věrný člen
28. 8. 2007   #3
-
0
-

Vytvor si stránku, v ktorej budeš mať scrollovací div, a strč do nej niekoľko objektov... tak aby sa div scrolloval. Potom si otvor firebug, daj inspect, vyber ten scrollovací div a v pravom okne firebugu otvor DOM. Uvidíš tak všetky vlastnosti toho objektu.

Scrollovanie sa dá odsledovať a meniť myslím cez scrollLeft a scrollTop; scrollWidth a scrollHeight sú rozmery celej vnútornej oblasti, offsetWidth, offsetHeight sú rozmery viditeľnej oblasti. Potom inspektni objekty vo vnútri a ich polohu (relatívne k rodičovskému objektu) zistíš cez offsetLeft, offsetTop, rozmery offsetWidth, offsetHeight, takže by sa to dalo vyrátať a scrollovat ručne.

Píšem to však len tak, ako sa pamätám, preto si to radšej skontroluj firebugom alebo inde, keď by bol problém tak na to ešte mrknem...

PS: Daj pozor na margin-y a padding-y - niektoré sa zarátavali do niektorých rozmerov a niektoré nie, to si už nepamätám.


EDIT: Ešte som si tak spomenul, clientWidth a clientHeight, to sú myslím skutočné rozmery viditelnej oblasti offsetWidth a offsetHeight započítavajú aj margin. čiže scrollTop sa pohybuje v rozmedzí 0 (celkom hore) do MAX (celkom dole), kde MAX by malo byt rovne scrollHeight (cela oblast) - clientHeight (viditelna oblast)
Hej a všetky spomínané rozmery sú v pixeloch

Nahlásit jako SPAM
IP: ...–
Prog.
Petroff0
Věrný člen
28. 8. 2007   #4
-
0
-

Představte si, že obsahem DIVu je text obsahující časti, [pro zjednodušení] každá je uvozena nadpisem H4. JS projde text, nalezne všechny objekty H4
a sestaví navigaci => texty nadpisů se stanou texty odkazů, které po kliknutí zobrazí ve výřezu DIVu příslušný nadpis.
PROBLÉM JE ŽE TEXTŮ JE MNOHO (dopředu neznám pozice jejich elementů), ALE KÓD MUSÍ UNIVERZÁLNĚ FUNGOVAT S KAŽDÝM.
HLAVNĚ NEVÍM NAPŘ. NA KOLIKÁTÉM ŘÁDKU BUDE 3.NADPIS (neboť formátování txt.line+block streamu je plně v režii browseru) - a to nepočítám např. event. meziodstavcové mezery atd.
Takže by se hodila nějaká šikovná DOM metoda/vlastnost (pohybovat s obsahem nahoru/dolů popř. nazačátek/nakonec) už umím.
FIREBUG už mi párkrát pomohl; nemáte náhodou odkaz na nějakou kompletní a podrobnou online DOM dokumentaci ?
(dosud jsem čerpal z knih,ale už jsou vrácené)
<ToProg.> Jak čtu znovu tvůj příspěvek, tak mi vychází, že by mi na to mělo stačit použít scrollTop, a vlastnosti offsetTop a xxxHeight, uvidíme...
(offsetTop je myslím vzdálenost TOPparent a TOPelement, žeano ; to bych výšku prvku ani nepotřeboval)

Nahlásit jako SPAM
IP: ...–
Petroff0
Věrný člen
29. 8. 2007   #5
-
0
-

Tak snadný by výpočet scrollTop nebyl, a to v případech, kdy se jedná o zanořený element
např. DIV#SKROLL > DIV#Text > P > A#Name

Naštěstí to jde velmi jednoduše (JS se použije jen ke tvorbě menu):
<a href="#idXX">xxxx</a> odroluje text v DIVu#SKROLL tak, aby se řádek s prvkem o ID="idXX" zobrazil správně jako 1.odshora
(nějak mi uniklo , že toto chování se netýká jen prvků v dokument.okně)

Nahlásit jako SPAM
IP: ...–
Prog.0
Věrný člen
3. 9. 2007   #6
-
0
-

No, ak by sa jednalo o vnorený element, tak jeho polohu musíš rekurzívne spočítavať. offsetLeft/Top vracia relatívnu polohu na parent objekt.

Vyzeralo by to asi takto:

obal = ... // scrollovaci div.

zobraz = ... // objekt ktory treba zobrazit. (nascrolovat sa na neho)

for( var x = 0, y = 0, obj=zobraz ; obj!==obal ; obj=obj.parentNode )
{
y+=obj.offsetTop;
x+=obj.offsetLeft;
}

obal.scrollLeft = x;
obal.scrollTop = y;


nemyslel som že to bude fungovať aj tak jednoducho, cez <a href="#id" ..
-- pekné riešenie, blahoželám ;-)

Nahlásit jako SPAM
IP: ...–
Prog.
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, 15 hostů

 

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