Teljes magasságú HTML div

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!
Teljes magasságú HTML div
0 szavazat, 0.00 átlagos pontszám (0%-ra értékelve)

Vélemény, hozzászólás?

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