Forum PHP.pl > [CSS][JavaScript]Ukrycie iframe za pomocą z-index

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][JavaScript]Ukrycie iframe za pomocą z-index

Lethys

3.11.2011, 17:29:23

Witam,

Posiadam skrypt który ukrywa wybraną treść, generalnie wszystko działa ze zwykłą treścią HTML, problem się pojawia gdy w ukrytą treść wklejam filmik youtube który jest w iframe.

Kod wygląda tak:

[PHP] pobierz, plaintext 
 
		<div id="tresc" style="z-index: 2;">
		<div style="position: relative; width: 96%; height: 5200px; padding:1% 4%; overflow:hidden; background-color:white;" class="fakewindowcontain">
// TUTAJ TREŚĆ UKRYTA		
			<!-- ui-dialog -->
 
			<div class="ui-overlay" style="z-index: 0;">
 
<div class="ui-widget-overlay" id="div1"></div><div id="div2" class="ui-widget-shadow ui-corner-all" style="width: 402px; height: 452px; position: absolute; left: 60px; top: 30px;" ></div></div>
			<div id="div3" style="position: absolute; width: 380px; height: 430px;left: 60px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
				<div id="div4" class="ui-dialog-content ui-widget-content" style="background: none; border: 0;" >
					<p><body onload="initElement()";>
 
// TUTAJ TREŚĆ ODKRYTA
</body></p>
				</div>
			</div>
 
		</div>
		</div>
[PHP] pobierz, plaintext

JS polega po prostu na zmienianiu z-index (div1,div2,div3,div4) na -3 jeżeli chcemy odkryć stronę. Domyślnie ustawione jest na z-index 0.

Kiedy wklejam kod filmiku yt np.:

[PHP] pobierz, plaintext 
<iframe width="560" height="315" src="http://www.youtube.com/embed/TYYyMu3pzL4" frameborder="0" allowfullscreen></iframe>
[PHP] pobierz, plaintext

to iframe zawsze jest na wierzu mimo iż jest w miejscu kod HTML który normalnie jest zakryty. Próbowałem zmieniać z-index iframowi ale nic to nie dawało.

croc

3.11.2011, 17:40:09

A nie łatwiej bawić się z visibility?

lobopol

3.11.2011, 17:54:28

ja tam bym go wypchnął za krawędź strony position:fixed i np. left:-9999px

Lethys

3.11.2011, 17:55:14

Spróbowałem z visiblity:

Jak zakryte:

[PHP] pobierz, plaintext 
document.getElementById("filmik").style.visiblity = "hidden"; 
[PHP] pobierz, plaintext

Jak odkryte:

[PHP] pobierz, plaintext 
document.getElementById("filmik").style.visiblity = "visible"; 
[PHP] pobierz, plaintext

i div:

[PHP] pobierz, plaintext 
		<iframe id="filmik" width="560" height="315" src="http://www.youtube.com/embed/pa14VNsdSYM" frameborder="0" allowfullscreen></iframe>
[PHP] pobierz, plaintext

Nadal wywala filmik yt jako pierwsza wartstwa na stronie, nie da sie zakryc...

Oidar

21.02.2012, 16:18:58

Jest tak dlatego że filmik z YT jest wyświetlany we flashu, a on automatycznie jest wyświetlany na wierzchu. Aby tak nie było należy nadać mu parametr "transparent". Poniżej przykładowy kod aby to zrobić:

[HTML] pobierz, plaintext 
<object type="application/x-shockwave-flash" data="jakiś.swf" width="1200" height="164" >
<param name="movie" value="jakiś.swf" />
<param name="wmode" value="transparent"> 
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.