[Web2.0] Scurire la pagina

Mar 19 Dic 2006 18:05:40 CET

On 12/19/06, Tinazzi Matteo <matteo a xelefant.com> wrote:
> Tinazzi Matteo wrote:
>
> >> ... e appena finisco 2 cosette vi pubblico lo script
>
> abbozzato molto al volo
>
> http://tafaz.altervista.org/light.html
>
> fatemi sapere se serve che appena ho altri 10 min ve lo rifinisco meglio

Carina la funzione sul resize della finestra, ci avevo pensato, ma non
ho avuto tempo di farla, però ho integrato il tuo script col nostro.

Testato su FF2, IE6 e IE7.

Se qualcuno lo testa su FF1.5 siamo a cavallo.

Andrea.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   <title>BLUR Example</title>
	<script language="javascript">
		nav = (typeof document.all!=="undefined")?"ie":"moz";
		show = false

		function doBlur()
		{
			el = document.getElementById('test');

			el.style.display = 'block';
			show = true
		}

		function doUnblur()
		{
			el = document.getElementById('test');

			el.style.display = 'none';
			show = false
		}

		function resizeBackground()
		{
			el = document.getElementById('test');

			el.style.width = ((document.documentElement.clientWidth)?
document.documentElement.clientWidth : document.body.clientWidth) +
"px";
			el.style.height = ((document.documentElement.clientHeight)?
document.documentElement.clientHeight : document.body.clientHeight) +
"px";
		}

		if (nav == "ie")
		{
			window.onresize = function () { if(show) { resizeBackground(); } }
		}
		else
		{
			window.addEventListener('resize', resizeBackground, false);
		}
	</script>
	<style type="text/css">
		#test {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			display: none;
			text-align:right;
			background:
			black; filter:alpha(opacity=60);
			-moz-opacity: 0.6;
			opacity: 0.6;
			border-style: none;
			padding: 0;
			margin: 0;
			z-index: 999;
		}
	</style>
</head>
<body id="body" onload="resizeBackground()">

<input type="button" name="click" value="blur" onclick="doBlur();">

<p>
asdas da dadasdasdasdads ads ads<br>
ad asdasd ads ads asd ads asd ads<br>
ads asd adsadsads ads ads asd ads<br>
a sdas<br>
<br>
asdas da dadasdasdasdads ads ads<br>
ad asdasd ads ads asd ads asd ads<br>
ads asd adsadsads ads ads asd ads<br>
a sdas<br>
<br></p>

<div id="test">
   <input type="button" name="unblur" value="close" onclick="doUnblur()">
</div>

</body>