Autor Zpráva
Suta
Profil
Mějme následující kód:

<style>
#rodic { filter: alpha(opacity=20); }
#dite_s_relativni_pozici { position: relative; }
</style>

<div id="rodic">
<div id="dite_s_relativni_pozici"></div>
</div>


Vnější div má nastavenu průhlednost. Za normálních okolností průhlednost dědí všechny vnořené prvky. Při nastavení relativní pozice vnitřnímu prvku se však průhlednost v Internet Exploreru neaplikuje.

Jak docílit toho, aby se průhlednost v IE aplikovala na všechny vnořené prvky bez ohledu na nastavení pozice?

Internet Explorer má tu vlastnost, že filtry neaplikuje na vnořené prvky, jež jsou vyjmuty z dokumentu (např. position: absolute aj.), nebo nemají tzv. hasLayout. Pokud však vnitřnímu divu přidáním dalších css vlastností hasLayout nastavím a ponechám relativní pozici, průhlednost stejně neaplikuje. Jak by tato situace dala vyřešit?

Jednoduchá ukázka: http://petrzavicak.cz/ukazky_problemu/ukazka_7.html
Yur4Y
Profil
Vyskúšajte
#rodic, #rodic * { filter: alpha(opacity=20); }
Chamurappi
Profil
Reaguji na Sutu:
Za normálních okolností průhlednost dědí všechny vnořené prvky.
To není dědičnost. Element je jako celek průhledný, včetně svého obsahu.

Jednoduchá ukázka
Neukazuje problém, protože ani jeden #rodic nemá zapnuté hasLayout (tzn. nemá nastavený rozměr, zoom či jinou vlastnost zapínající hasLayout).

Jak by tato situace dala vyřešit?
Nastav elementu, kterému dáváš filter, také „position: relative“.


Reaguji na Yur4Ye:
To bych nedělal. Právě proto, že žádané a očekávané chování není dědičnost.
Bubák
Profil
Chamurappi
A jak vyřešit ořez pozicovaného "dítěte"? CSS je k HTML v ukázce.
    #rodic { filter: alpha(opacity=20); width: 100%; position: relative; }
    
    #dite_obycejne { }
    #dite_s_relativni_pozici { position: relative; top: 10px;}
Suta
Profil
Reaguji na Chamurappiho:
Neukazuje problém, protože ani jeden #rodic nemá zapnuté hasLayout (tzn. nemá nastavený rozměr, zoom či jinou vlastnost zapínající hasLayout).
Testoval jsem i se zapnutým layoutem, ukázku výše jsem vytvořil bez něj, nenapadlo mě přidat jej kvůli případným nedorozuměním, zřejmě chyba. V ukázce níže je již has layout zapnut, chování je však stejné.

http://petrzavicak.cz/ukazky_problemu/ukazka_8.html

Nastav elementu, kterému dáváš filter, také „position: relative“.
Také jsem v dřívějších testech použil, nicméně dospěl jsem do stádia, kdy nadřazenému prvku relativní pozici nastavit nemůžu, třeba proto, že v kontextu rozvržení stránky musí mít pozici absolutní. Jaká cesta v tomto případě? To je ten hlavní oříšek!

Poznámka: Nastavení relativní pozice rodičovskému prvku neřeší problém v Internet Exploreru 8 (nevím zda-li také v 7), v ostatních verzích toto řešení použít lze. Navíc v IE 8 je k dispozici filter progid:DXImageTransform.Microsoft.Alpha(opacity=xxx)
Bubák
Profil
Navíc v IE 8 je k dispozici filter progid:DXImageTransform.Microsoft.Alpha(opacity=xxx)
Tento filtr a několik dalších je k dispozici již v IE5.5.
Info: První filtry se objevily v IE 5, další v IE 5.5, od té doby nic nového, pokud pominu mírně podlišný zápis filtru ve standardním režimu IE8.

Nastavení relativní pozice rodičovskému prvku neřeší problém v Internet Exploreru 8
Nemám instalovaná IE8, o co jde?

musí mít pozici absolutní. Jaká cesta v tomto případě?
To, co napsal Yur4Y, funguje. Jenom bych zvážil, jestli v konkrétním případě nebude vhodnější toto:
#rodic, #rodic #dite_s_relativni_pozici { filter: alpha(opacity=20); }

Jen mi nedochází, proč dáváš do elementu "dítě", a pak ho absolutně pozicuješ. Jaký to má význam?
Suta
Profil
Reaguji na Bubáka
Jen mi nedochází, proč dáváš do elementu "dítě", a pak ho absolutně pozicuješ. Jaký to má význam?
Absolutně pozicovaný prvek vedle toho, že je vyjmut z toku dokumentu a umístěn na přesné souřadnice zároveň vytváří omezující blok pro všechny své absolutně či relativně pozicované potomky. Tzn. že pozice (left, top) takovýchto potomků se bude odvozovat od absolutně (či relativně) pozicovaného rodiče.

„Nastavení relativní pozice rodičovskému prvku neřeší problém v Internet Exploreru 8“
Nemám instalovaná IE8, o co jde?

Chamurapi psal o tom, že problém při neaplikování průhlednosti na vnořené prvky s relativní pozicí přes rodiče, na nějž je průhlednost aplikována, řeší nastavení relativní pozice také danému rodiči. Dle mých testů tomu tak je mimo IE 8, kde nastavení relativní pozice rodiči nepomůže. V ostatní verzích IE (netestoval jsem všechny) nastavení relativní pozice rodiči pomůže.

Jenom bych zvážil, jestli v konkrétním případě nebude vhodnější toto:
1 #rodic, #rodic #dite_s_relativni_pozici { filter: alpha(opacity=20); }

Ano, v případě aplikování průhlednosti na jeden prvek určitě. A v podstatě jednoduchá odpověď na můj hlavní/první příspěvek v tomto tématu by byla: nastav průhlednost jak rodiči, tak dítěti. Nicméně...

Aplikovat průhlednost tímto způsobem nelze ve složitějším případě, tedy např.:
- mám-li lištu menu, jež obsahuje dejme tomu 20 položek;
- každá položka má relativní pozici;
- zároveň se každá položka skládá více než z jednoho relativně pozicovaného prvku (pozadí tlačítek menu, atd.)
- na celou lištu aplikuji vlastní funkci fadeOut, která v rekurzi snižuje vlastnost opacity, tedy v extrému 100x (od 100 - úplné viditelnosti do 0 - úplné neviditelnosti)
- tím je docíleno postupného zmizení prvku

Můžu samozřejmě scriptem projít všechny prvky a u těch, jež mají nastavenu relativní pozici - a průhlednost by na ně aplikována nebyla - těmto prvků průhlednost nastavit v každém kroku také. Prohlížeč ne že by tuto operaci nezvládnul, ale není plynulá, díky aplikovanost filtru na desítky prvků v krátkém časovém úseku dochází k "zasekávání" a narušení plynulosti, tedy efekt vytracení prvku není plynulý.

Praktická ukázka, která v sobě zahrnuje zmíněnou lištu a její zmizení. Efektu vytracení je zde docíleno jiným způsobem, překrytím daného menu absolutně pozicovaným prvkem s vysokým indexem, u nějž je opacity aplikováno opačně, tedy v rekurzi od 0 do 100. Tím dojde k postupnému zobrazení překryvného objektu tím k efektu vytracení lišty menu (jež je pod překryvným objektem).

http://petrzavicak.cz/editor/menu_hotovo/menu_uprava.html (vpravo nahoře je umístěna šipka pro skrytí a zobrazení lišty)

Má-li někdo lepší řešení, budu rád za jakoukoliv jinou cestu. Já sám jsem bohužel na jiné řešení nepřišel.
------------------------------------------------------------

Poznámka: pokud by opacity nebylo aplikováno v rekurzi, ale jednalo-li by se o prosté nastavení průhlednosti prvku, kterému nelze nastavit relativní pozici a zároveň má v sobě další prvky, jež relativní pozici mají, pak se tedy zdá, že jediným řešením je nastavit opacity také všem těmto vnořeným prvkům. Existuje-li jednodušší řešení, nevím. Zřejmě ne.
Plaváček
Profil
Suta

Píšeš příspěvky dlouhé, ale poměrně špatně pochopitelné. Hledáš nějaké podobné řešení?

http://www.quirksmode.org/css/opacity.html
http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
Suta
Profil
Plaváček
Hledáš nějaké podobné řešení?
Ne, hledám přesně opačné řešení než je uvedeno v druhém odkaze. Tedy aby všechny "vnořené" prvky byly také průhledné. Zkusím co nejstručněji a snad výstižně.

1. Mám vnější prvek, na nějž je aplikována opacity (dále jen průhlednost).
2. Tento rodičovský prvek v sobě obsahuje další prvky, na nichž má být průhlednost aplikována také.
3. Všechny vnitřní prvky MUSÍ mít nastavenu relativní pozici.
4. Rodičovský prvek NESMÍ mít nastavenu relativní pozici.

Příklad:
<div id="rodic"> //prvek má ve stylu nastavenu 50% průhlednost, NESMÍ mít relativní pozici
<div class="dite_1"></div> //chci, aby tento vnořený prvek byl také průhledný; MUSÍ mít relativní pozici
<div class="dite_2"></div>
<div class="dite_3"></div>
// zde je dalších 50 vnořených prvků
</div>


5. Spustím vlastní funkci fadeOut, která se provede po 20 milisekundách postupně 100x a v každém kroku nastaví rodičovskému prvku opacity o jedno menší (tedy od 100 až do 0 - tzn. prvek se postupně vytratí).

Otázka: to, co hledám, je způsob, jak tuto opacity nastavit vnějšímu prvku tak, aby ji sdědily i všechny vnořené prvky (v ukázce výše ji nezdědí díky nutnému konkrétnímu pozicování - viz výše). Řešení, které spočívá v nastavení opacity v každém kroku i všem vnořeným prvkům není přípustné, jelikož při aplikování opacity v 20-milisekundových rozestupech 50 prvkům a víc dochází k "cukání" a neplynulosti efektu vytracení (prohlížeče tuto operaci nezvládají dobře).

Snad jsem to tentokrát napsal srozumitelně.
Suta
Profil
Yur4Y
Inu vypadá to, že tvé řešení:
#rodic, #rodic * { filter: alpha(opacity=20); }

je v mé situaci jediné možné, a funguje - na vnořené prvky s jakkoliv nastavenou pozicí - spolehlivě.

Abych ji však mohl použít, potřeboval bych ji upravit do dynamické podoby. Nikde jsem však nenašel, jak takového zápisu docílit pomocí javascriptu.

Dá se javascriptem nastavit takovýto styl?
Tedy
#rodic *
nějak na způsob (který samozřejmě nemůže fungovat, jen pro názornost)
document.getElementById("rodic").getElementsByTagName("*").style.xxx = "xxx" ?
Yur4Y
Profil
Jedine použiť cyklus
var vsetky = document.getElementById("rodic").getElementsByTagName("*");
for (var i = 0, len = vsetky.length; i < len; i++)
{
    vsetky[i].style.xxx = 'xxx';
}
Chamurappi
Profil
Reaguji na Sutu:
Pokud ten styl potřebuješ nastavit při načítání, vypiš <style> přes document.write.
Pokud ho potřebuješ přepínat, nesahej na style, měň třídu společného rodiče a nech změnu vzhledu jen na stylopisu.

Ty navíc nechceš zaměřit všechny potomky #rodice, ale jen všechny relativně pozicované potomky (bylo by lepší je vyjmenovat, než dát tam hvězdičku).
Suta
Profil
Yur4Y
Jasně, průchodem ano. Ale to jsem zase zpátky. Pokud funkci, která projde všechny vnořené prkvy a opacity nastaví i u nich spustím každých 20 milisekund, prohlížeče stávkují v plynulosti provádění operací.

Jedině snad, dá-li se nějak zasáhnout přímo do stylopisu?

Chamurappi
Jedná se o situaci, kdy dopředu nevím, na které prvky budu funkci nastavující v cyklu opacity aplikovat. Tzn. uživatel např. kliknutím na stránce vybere prvek (menu, levý panel aj.), na němž se má funkce s nastavováním opacity v cyklu spustit.
Chamurappi
Profil
Reaguji na Sutu:
dopředu nevím, na které prvky budu funkci nastavující v cyklu opacity aplikovat
To přeci nevadí. Jeden element může mít spoustu tříd.
Suta
Profil
Yur4Y, Chamurappi
Vypadá to, že nezbude jiná cesta, než:

- u všech prohlížečů kromě IE využít klasického nastavení filtru na rodiče, v těchto prohlížečích je průhlednost opacity aplikována na všechny vnořené prvky
- u Internet Exploreru projít všechny vnořené prvky s relativní pozicí a v každém průchodu cyklu aplikovat zvýšenou/sníženou hodnotu opacity i na ně

Sice tím riskuji, že uživatelům s IE nemusí fadeOut/fadeIn na prvcích s mnoha relativně vnořenými prvky probíhat hladce a plynule, ale ani po dalším půldenním testováním různých technik jsem nedokázal přijít na "lepší" řešení.
Plaváček
Profil
Suta

Dovol jednu otázku - z jakého přesně důvodu nesmí mít nadřazený blok relativní (případně absolutní) pozici?
Suta
Profil
Reaguji na Plaváčka:
Dovol jednu otázku - z jakého přesně důvodu nesmí mít nadřazený blok relativní (případně absolutní) pozici?

Upřesním, jak bylo myšleno. Nadřazenému prvku nemůžu přiřadit relativní pozici v případě, že má nastavenu pozici absolutní. Narušil bych tak "vytržení" prvku ze stránky a vrátil bych jej do normálního kontextu stránky. Pokud však prvek nemá nastavenu pozici na absolutní, pak, pochopitelně, můžu relativní pozici přiřadit kdykoliv bez jakéhokoliv (snad..) narušení původní funkčnosti stránky.
Plaváček
Profil
Suta

Nadřazenému prvku nemůžu přiřadit relativní pozici v případě, že má nastavenu pozici absolutní.

Ano, to jsem pochopil. Jenže jak jsem zkoušel řešit tvůj problém, získal jsem pocit, že nastavení absolutní pozice nadřazenému prvku také funguje. Jenže zrovna v tuhle chvíli jsem na jiném místě, než můj pokusný kód.
Suta
Profil
Po dalších dnech (ano, je to neuvěřitelné i pro mě samotného...) zkoušení a testování, jak docílit nejlepšího univerzálního postupu pro korektní aplikování průhlednosti bez ohledu na typ, verzi prohlížeče a pozici prvků na stránce jsem se dobral zhruba k tomuto "téměř" funkčnímu řešení:

1. Prohlížeče mimo Internet Explorer zprůhlední jak prvek, na nějž je opacity aplikováno, tak všechny jeho potomky, a to bez ohledu na jejich pozici či pozici jejich rodiče (position relative, absolute, fixed, static). Zde tedy problém není, takže u těchto prohlížečů aplikuji opacity pouze na daný prvek a o nic více se nemusím starat.

2. Problémy začínají u Internet Exploreru.

a) Mají-li vnořené prvky nastavenu relativní nebo absolutní pozici, opacity na ně není aplikováno
- problém jsem postupně vyřešil pomocí nastavení relativní či absolutní pozice také rodičovskému prvku, v IE 8 je navíc třeba přiřadit rodičovskému prvku vlastnost z-index s číselnou hodnotou (tedy prvek nesmí mít hodnotu "auto")

b) při zvětšení textu jiném než 100% s aplikovaným opacity dochází k jeho roztřepání (viz příklad níže)

c) Při posunu vnořeného objektu mimo hranice rodičovského objektu je však vše, co tento objekt přesahuje a má nastaveno opacity ořezáno, tj. zneviditelněno, z jakého důvodu, mi dosud není známo.

Pomůže-li mi někdo především! s řešením bodu c, zůstanu mu velkým dlužníkem. Po tolika dnech se mi skutečně zdá, že jsem vyzkoušel vše, co jde..

A ještě jednou stručně: Aplikování opacity na všechny vnořené prvky s jakoukoliv pozicí řešené v příspěvcích výše se mi rozchodit podařilo (viz kód příkladu níže), co mi zbývá dořešit je viditelnost celých (relativně či absolutně posunutých) prvků, na něž je opacity aplikováno. Tyto problémy jsou pochopitelně opět pouze v IE, ostatní prohlížeče zvládají vše bezchybně...

Ukázka zde: http://www.petrzavicak.cz/ukazky_problemu/ukazka_9.html
Bubák
Profil
c) Při posunu vnořeného objektu mimo hranice rodičovského objektu je však vše, co tento objekt přesahuje a má nastaveno opacity ořezáno, tj. zneviditelněno, z jakého důvodu, mi dosud není známo.
Důvod taky neznám, ale vím, že k tomu dochází, a proto jsem se ptal Chamurappiho, jak ořezu zabránit.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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