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!