[JS] misura della finestra e resize.

**andropoff** · 15-01-2008, 15:20

ciao tutti, ho creato questa funzioncina per poter avere un div alto come la misura della finestra

codice:

<script language="javascript">
var s_height ='';
s_height=window.innerHeight;
document.write('<style type="text/css"> div#right {height:'+s_height+'px;} </style>');
</script>

tutto ok, se non che, ridimensionando la finestra, il div resta ovviamente della misura iniziale inserendomi quindi uno scroll...

è possibile far in modo che al resize della finestra anche il parametro height si modifichi di conseguenza?

ed è inoltre possibile inserire una misura sotto la quale il div non può andare?!

grazie a chi mi aiuta...

**Xinod** · 15-01-2008, 20:03

stabilisci via css l' altezza minima dell' elemento (magari anche usando min-height, puoi approfondire nel forum css), nel caso javascript sia disabilitato o manchi proprio il supporto ad esso
poi:
- rileva in maniera crossbrowser l' altezza della viewport
- richiama la funzione che setta l' altezza dell' elemento solo quando sei certo che l' elemento sia gia' stato definito (per semplicita' e chiarezza: nel window.onload),
e, da questo momento in poi, setta anche al resize il richiamo della stessa funzione

codice:

function getViewportHeight(){
	return (
		(self.innerHeight)?self.innerHeight:
		((document.documentElement && document.documentElement.clientHeight)?
			document.documentElement.clientHeight:
			document.body.clientHeight
		)
	)
}
function resizeDiv(id,minHeight){
	var el=document.getElementById(id);
	var h=getViewportHeight();
	el.style.height=((h<minHeight)?minHeight:h)+'px';	
}

window.onload=function(){
	resizeDiv('right',300);
	window.onresize=function(){resizeDiv('right',300);}
}

**andropoff** · 15-01-2008, 21:33

grazie per la risposta..

ho modificato il mio codice così, ed in effetti adesso ho risolto i problemi di explorer

codice:

var x,y;
if (self.innerHeight) // all except Explorer
{
	x = self.innerWidth;
	y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
	// Explorer 6 Strict Mode
{
	x = document.documentElement.clientWidth;
	y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
	x = document.body.clientWidth;
	y = document.body.clientHeight;
}
document.write('<style type="text/css"> div#right {height:'+y+'px;} </style>');

quello che non capisco è come inserire il codice che mi hai dato tu e come (e quando) richiamarlo.. all'onresize del body?

scusa ma sono un novellino di js..

**Xinod** · 15-01-2008, 21:38

il body lascialo stare,
quello che scriveresti in <body onload="..." onresize="...">
e' gia' qui

codice:

window.onload=function(){
	resizeDiv('right',300);
	window.onresize=function(){resizeDiv('right',300);}
}

anche tutto quello che hai scritto in questo nuovo messaggio e' gia' condensato in quello che ho scritto io

codice:

function getViewportHeight(){
	return (
		(self.innerHeight)?self.innerHeight:
		((document.documentElement && document.documentElement.clientHeight)?
			document.documentElement.clientHeight:
			document.body.clientHeight
		)
	)
}
function resizeDiv(id,minHeight){
	var el=document.getElementById(id);
	var h=getViewportHeight();
	el.style.height=((h<minHeight)?minHeight:h)+'px';	
}

Discussione: [JS] misura della finestra e resize.

Strumenti discussione

Ricerca discussione

Visualizza

[JS] misura della finestra e resize.

Permessi di invio