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:
#overlay_all { position: absolute; top:0px; left:0px; width:100%; height: 100%; background-color: #000000; filter: alpha(opacity=40); -moz-opacity:.40; opacity:.40; color: black; visibility: hidden; z-index:10; }
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.
function get_innerheight() { if (document.body.scrollHeight>0) // all - maybe scnHeight = document.body.scrollHeight; else if (self.innerHeight) // all except Explorer scnHeight = self.innerHeight; else if (document.documentElement && document.documentElement.clientHeight) // Explorer 6 Strict scnHeight = document.documentElement.clientHeight; return scnHeight; }
Ez működik Google Chrome 1.0, Firefox 3, IE 7, Opera 9.25 alatt.
A div-et megjelenítő, elrejtő kód:
function switch_overlay_all() { OA = document.getElementById('overlay_all'); OA.style.height = get_innerheight()+'px'; if(OA.style.visibility == 'hidden') OA.style.visibility = 'visible'; else OA.style.visibility = 'hidden'; }
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!