Miután kicsivel többet szívtam azzal, hogy meg tudjam csinálni, gondoltam megosztom a tapasztalataimat…

Az egyik weblapba szerettem volna beépíteni egy olyan effektet, hogy amikor egy kis ajánló adatlapot megynyitok, akkor a honlap tartalma elsötétűl, kiemelve így az adatlapot. Erre egy teljes szélességű és magasságú layert kell használnunk, mondjuk fekete háttérszínnel, ~40%-os opacity beállítással…

Amíg nem kellett a tartalmat scrollozni, nem volt probléma. Width: 100%, és height: 100% teljesen jó volt. Amikor már nagyobb lett a tartalom, akkor jött a gond: a layer nem fedte le azt a tartalmat, ami az épp látható képen kívül esett…

Ezért úgy döntöttem, a takaró réteg megjelenítésekor javascripttel beállítom a magasságát is, így mindig a böngésző belső tartalmának magasságát veszi majd fel.

Mivel az Explorer folyamatosan makacskodott, kellett vele játszani… Végül megszületett a megoldás.

A layer CSS leírói:

A filter beállításoknál többféle módon is megadjuk az opacity-t, hogy minden böngésző értelmezze.
Itt a layer visibility:hidden mert ezt is scriptből változtatom. A z-index legyen kellően magas, hogy minden más layer fölé kerüljön (már ha valóban takaróréteget akarunk csinálni) 🙂

UPDATE – A belső tartalom magasságát vizsgáló javascript kód:

Van, amikor a függvény első ága nem működik, csak részben fedi le a teljes tartalmat. Az explorer 7 alatt is jó a többi kettő, tehát érdemes lehet elhagyni, és csak a két utolsó lehetőséget használni.


Ez működik Google Chrome 1.0, Firefox 3, IE 7, Opera 9.25 alatt.

A div-et megjelenítő, elrejtő kód:

Ha nem látható a layer, bekapcsolja és ellenkezőleg.

Végül még a html kód ide vágó részlete (semmi extra az elhelyezésben,  de a megfelelő működéshez kezdeti értéknek meg kell adni a visibility:hidden-t):

Remélem segít annak, aki ilyesmit keres, és ide téved!


0.00 avg. rating (0% score) - 0 votes

Leave a comment

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük