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!


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

Leave a comment

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