webForumDet fria alternativet
Logga in / Bli medlem

Tips: Mörka en sida

JavaScript

2 svar · 5 479 visningar · startad av Ramzeus

Medlem sedan mars 200642 inlägg
Frågan#1

Jag såg ett inlägg från någon som undrade hur utvecklarna bakom webForum kunde göra sidan svartvit i explorer när man klickar på 'Logga ut'.
Jag blev lite intresserad och försökte kolla om det var möjligt att göra i Firefox.
Tyvärr verkar det inte som att man kan få webbsidan att bli svartvit, men däremot var det inga problem att mörka ner sidan, vilket ju kan vara nog så bra.

Metoden jag gjorde detta på var att slänga upp ett lager framför webbsidan med en halvtransparent png-bild i. Sidan kommer då att mörkas ner.
Eftersom inte explorer stödjer transparens i png-bilder för än i version 7.0 så fick det bli lite specialfall för äldre explorer-versioner.

Här är exempelkoden:

<html>
<head>
	<script type="text/javascript">
		<!--
		function bwFade()
		{
			var el = document.getElementById('bwFadeDiv');
			el.style.display = "block";
		}
		// -->
	</script>
	<style type="text/css">
	#bwFadeDiv { 
		position: absolute; 
		top: 0px; 
		left: 0px; 
		width: 100%; 
		height: 100%; 
		display: none; 
		z-index: 1000; 
		background-image: url('bwFadeBG.png');"
	}
	</style>
	<!--[if gte IE 5.5]>
	<![if lt IE 7]>
	<style type="text/css">
	#bwFadeDiv { 
		background-image: url('');
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bwFadeBG.png',sizingMethod='scale'); 
	}
	</style>
	<![endif]>
	<![endif]-->
</head>
<body>
<div id="bwFadeDiv">&nbsp;</div>
 INNEHÅLL PÅ SIDAN
</body>
</html>

För att mörka ner sidan så kallar man på bwFade(); Jag har ingen funktion för att ta bort nermörkningen, men det är ju bara att byta ut display="block" mot display="none" för att få till det.

Om du använder en Doctype i ditt html-dokument så kan det hända att bredden och höjden blir fel. Sätt då in följande style:

html {
	width: 100%;
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
}

Bifogat finns den lilla png-bilden som används för bakgrunden.

bwFadeBG.png
Medlem sedan aug. 20039 340 inlägg
#2

Det finns ett separat forum för färdiga script: http://www.webforum.nu/forumdisplay.php?f=149
Men dubbelposta inte, dion tråd kommer att förflyttas.

Medlem sedan aug. 20039 340 inlägg
#3

Tråden flyttades från JavaScript, DHTML

(Dock inte av mig utan av Jojoxx eller RGB)

256 ms totalt · 4 externa anrop · v20260731065814-full.14655e19
117 ms — deklarationer (db)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)
119 ms — ändringar (db)