| Autor | Zpráva | ||
|---|---|---|---|
| hypot Profil |
#1 · Zasláno: 22. 5. 2017, 10:06:53
Zdravím,
narazil jsem na zvláštní případ zobrazování skrytého prvku, který neodpovídá tomu, co od něj očekávám. Situace je zachycena zde: codepen.io/pigner/pen/eWQKqO Po kliknutí na odkaz se zobrazí do té doby skryté okno (DIV), pomocí Javascriptu je nastaveno, aby se zobrazilo uprostřed obrazovky (viewportu). Rozměry nemá pevně dané (v závislosti na obsahu, který může být různý), pouze maximální šířku 480px. Pokud je šířka obrazovky větší než oněch 480px, je vše (jakžtakž) v pořádku, pokud je však právě 480px či menší, zobrazí se po kliknutí na odkaz ono skryté okno s náhodnou šířkou menší než 480px a rozhodně ne vystředěné na šířku (ani na výšku). Vzorec pro výpočet polohy okna je podle mě jasný a jednoduchý, takže nevím, proč dostávám jiné hodnoty. A ještě zvláštnější je jiné zjištění (na uvedeném příkladě pro zobrazení onoho efektu nutno přesunout bílou zobrazovací plochu na svislo (Change View > Editor Layout) a zúžit ji na méně než 480px) - pokud zobrazené okno zavřu a znovu kliknu na odkaz, zobrazí se okno s větší šířkou než naposledy (avšak stále ne vystředěné) a tak se to při dalších kliknutích opakuje (šířka zobrazeného DIVu se tedy pomalu s každým kliknutím zvětšuje), dokud zobrazené okno nedosáhne šířky 480px. Toto chování je nezávislé na konkrétním prohlížeči. To vše při aplikaci stejného vzorce, který by při stále stejných vstupních hodnotách měl dávat stále stejné výsledky. Dokázal by mi někdo vysvětlit důvod tohoto chování a hlavně nápravu? Děkuji. |
||
| TomášK Profil |
#2 · Zasláno: 23. 5. 2017, 11:10:40
To vše při aplikaci stejného vzorce, který by při stále stejných vstupních hodnotách měl dávat stále stejné výsledky.
Vstupní hodnoty jsou pokaždé jiné (šířka onoho elementu se mění), proto je i jiný výstup. Pokud je okno menší než 480 px, element vyplní celou jeho šířku. Pokud ho posuneš doprava (left: 10px), vyplní okno od 10px dále. Na pravé strané žádný okraj nevznikne. Kód je psaný tak, že další kliknutí zmenší ten levý okraj na polovinu a element se tedy zvětšuje. Vystředit vertikálně i horizontálně jde i bez javascriptu. |
||
| hypot Profil |
Aha, já už vím, v čem je zakopaný pes. Já jsem se domníval, že onomu skrytému prvku prohlížeč spočítá nějakou šířku až v okamžiku, kdy se prvek zviditelní, ale on už nějakou spočítanou šířku má, i když je ještě skrytý. Jenž tím se mi spíš zhoršilo, než zlepšilo.
TomášK: „Pokud ho posuneš doprava (left: 10px), vyplní okno od 10px dále.“ Těch 10px je polovina paddingu stránky (resp. prvku body), která je nastavena v dané ukázce. Při odstranění paddingu je skrytý element zobrazen už po prvním kliknutí přes celou šířku zúženého okna. TomášK: „Vystředit vertikálně i horizontálně jde i bez javascriptu. “ Když dopředu neznám rozměry elementu a zároveň potřebuju position: fixed?
|
||
| weroro Profil |
hypot:
„Když dopředu neznám rozměry elementu a zároveň potřebuju position: fixed?“
Samozrejme, že to ide. Živá ukázka |
||
|
Časová prodleva: 7 let
|
|||
0