Autor Zpráva
Suta
Profil
Potřeboval bych poradit s maximalizací objektů. Mějme následující požadavek.

1. Mám strukturu divů. Některé z nich mají příznak "maximalizovat".

2. Jelikož tyto divy mají okraje a rámečky, nemůžu používat nastavení výšky a šířky na 100%, jelikož by byl prvek roztažen více, než je volný prostor v jeho rodiči. "Maximalizaci" tak musím provádět vzpočítáním javascriptem..

3. Tento příznak (příklad: mujDiv.maximalizovat = true) zjednodušeně značí to, že prvek má být vždy roztažen přes celou výšku a šiřku svého rodiče.

4. Je-li třeba objekt maximalizovat (např. se změnila velikost jeho rodiče), je zavolána speciální funkce, která správně vypočítá volnou výšku v rodiči, a v závislosti na pozici, okrajích, odsazení a rámečku maximalizovaného objektu vypočítá jeho výšku a šířku tak, aby byl roztažen přes volnou výšku a šiřku v rodiči.

6. Má-li tento příznak více objektů, jež jsou v sobě vnořeny, pak při změně velikosti určitého objektu je potřeba provést výše uvedenou "maximalizaci" u všech vnitřních objektů s tímto příznakem.

Vše, co je uvedeno výše mám již naprogramováno a vše funguje tak, jak má. Můj dotaz však směřuje k nejlepší optimalizaci a způsobu, jakým při změně velikosti rodiče přistoupím k vnořeným prvkům, jež mají udržovat maximalizaci.

Aktuálně používám tento způsob.
Při změně velikosti objektu projdu všechny jeho potomky. Má-li některý z nich příznak"maximalizovat", spustím jeho maximalizaci. Ten pak provede to samé se svými dětmi, takže rekurzivně dojde k maximalizaci všech vnořených objektů.

Existuje vhodnější řešení nebo jiný způsob, jak docílit požadované funkčnosti?
Chamurappi
Profil
Reaguji na Sutu:
Jelikož tyto divy mají okraje a rámečky, nemůžu používat nastavení výšky a šířky na 100%
Nativní přepočítávání rozměrů skrz CSS je efektivnější než skriptování.
1) Můžeš přepnout box model. Explorery 6 a 7 necháš v quirku, vše ostatní přepneš do standardního režimu a změníš box-sizing na border-box.
2) Můžeš dovnitř zanořit další element a border nastavit tomu obalujícímu.
3) Můžeš s přetečením způsobeném okrajem počítat a kompenzovat ho tak, aby nevypadalo jako chyba. Je to komplikovanější, ale většinou ne nemožné.

Ještě bych se zamyslel nad tím, jestli ty maximalizované věci potřebují border.

Tento příznak (příklad: mujDiv.maximalizovat = true)
Spíš než vlastnost bych mu přidal třídu. Tím by práce skriptu skončila, ostatní by zařídil stylopis.
Suta
Profil
Tak to byla, Chamurappi, naprosto přesná trefa do černého.

Vůbec jsem nevěděl o této možnosti (přepnutí box-modelu). Vyřešil jsi mi spoustu zbytečného kódování. Teď můžu svá plovoucí okna maximalizovat přes celou výšku a šířku prohlížeče jednoduše pomocí stylopisu (100% heihgt, 100% width), nemusím mít obavy přidat padding a border, a už vůbec nemusím řešit scriptování vnořený prvků, které se mi na stejném principu roztáhnou správně bez jakékoliv kolize.

Vyzkoušeno, vážně funguje! Díky moc.

Jen pár drobných postřehů:

1. Netbeans mi vlastnost -moz-box-sizing vezmou, ale box-sizing podtrhnou (ani nenabízejí jako předvolbu při vepsání prvních písmen). Jedná se o standartní vlastnost jazyka css?

2. Víš o nějakých problémech, které by mi mohlo použití nestandartního box-modelu přinést? Např. výpočet přesných rozměrů pomocí offsetTop, offsetWidth nebo cokoliv jiného?

3. Opravdu všechny dnes běžně používané prohlížeče podporují nestandartní box-model? I mobilní telefony pracující s css?

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: