[ javascript ] - Rivelare area disponibile.

**cichity74** · 16-09-2004, 14:35

lo script sottostante mi restituisce la risoluzione in uso ma a me occorre sapere l'area reale...
mi spiego meglio ridimensionando ie la funzione mi restituisce sempre 1024x768 pur avendo ridimensionato la finestra.
come posso rivelare la reale area a disposizione ?????
cichity74

codice:

<script language="javascript">
<!--
var hs = window.screen.height;
var ws = window.screen.width;
with (document) {
write("<div align='center'>");
write(" Risoluzione video attuale: " + ws + " X " + hs + "
");
write("</div>");
}
//-->
</script>

**Xinod** · 16-09-2004, 15:06

ti serve solo area visualizzata del documento (quindi escluso lo spazio occupato da barre e telaio della finestra)?

codice:

function rW(){
	return (window.innerWidth)?window.innerWidth:
		(document.documentElement.clientWidth)?document.documentElement.clientWidth:
		(document.body.clientWidth)?document.body.clientWidth:0;
}
function rH(){
	return (window.innerHeight)?window.innerHeight:
		(document.documentElement.clientHeight)?document.documentElement.clientHeight:
		(document.body.clientHeight)?document.body.clientHeight:0;	
}
alert(rW()+'*'+rH());

**cichity74** · 16-09-2004, 15:16

Esattamente ciò che tentavo di fare

ora mi occorre che la funzione restituisca ad un Layer i valori rivelati in moda da poter impaginare nell'angolo inferiore destro un immagine…

codice:

<div id="Layer1" style="position:absolute; width:340px; height:265px; z-index:1; left: 0; top: 0;">[img]img/fondo_l_t.jpg[/img]</div>
<div id="Layer2" style="position:absolute; width:340px; height:265px; z-index:2; left: (VALORE DINAMICO)px; top: (VALORE DINAMICO)px;">[img]img/fondo_r_d.jpg[/img]</div>

il Layer1 è fisso a left: 0; top: 0; mentre il Layer2 deve posizionarsi al valore restituito dal tuo script - la sua dimensione

in modo da popolare l'angolo inferiore destro a prescindere dalla risoluzione o dal ridimensionamento manuale dell'utente...

**Xinod** · 16-09-2004, 16:13

bene, javascript in fase di rendering scrive tramite document.write()
quindi questo

<div id="Layer2" style="position:absolute; width:340px; height:265px; z-index:2; left: (VALORE DINAMICO)px; top: (VALORE DINAMICO)px;">[img]img/fondo_r_d.jpg[/img]</div>

lo potresti ottenere solo facendo scrivere da javascript tutto il tag
ma a te non conviene x vari motivi (accessibilità e gestione al resize cmq necessaria)

altra considerazione: IE necessità almeno dell' apertura del tag <body> prima di conoscere quei valori
quindi setta nel css del Layer2 quei valori a 0 0 e (se non vuoi che sia visto inizialmente fuori posto) la visibility a hidden

se vuoi riposizionarlo il prima possibile, nell' head

codice:

<script type="text/javascript">
var readyToResize=false;

function rW(){
	return (window.innerWidth)?window.innerWidth:
		(document.documentElement.clientWidth)?document.documentElement.clientWidth:
		(document.body.clientWidth)?document.body.clientWidth:0;
}

function rH(){
	return (window.innerHeight)?window.innerHeight:
		(document.documentElement.clientHeight)?document.documentElement.clientHeight:
		(document.body.clientHeight)?document.body.clientHeight:0;	
}

function riposiziona(){
	var el=document.getElementById('Layer2')
	el.style.top=(rH-265)+'px';
	el.style.left=(rW-340)+'px';
	el.style.visibility='visible';
	readyToResize=true;
}
</script>

subito sotto il div Layer2 inserisci questo

codice:

<script type="text/css">riposiziona()</script>

e modifica il tag <body> aggiungendo

codice:

<body ... onresize="if(readyToResize){riposiziona();}" ...>

ciao

**cichity74** · 16-09-2004, 17:04

Devo are scritto qualche fagianata

....
non mi funziona più :master:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
body {
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
</style>

<script language="JavaScript" type="text/JavaScript">
function MM_reloadPage(init) {
if (init==true) with (navigator) {
	if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
		document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage;
	}
}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>

<script language="JavaScript" type="text/javascript">
var readyToResize=false;

function rW(){
	return (window.innerWidth)?window.innerWidth:
		(document.documentElement.clientWidth)?document.documentElement.clientWidth:
		(document.body.clientWidth)?document.body.clientWidth:0;
}
function rH(){
	return (window.innerHeight)?window.innerHeight:
		(document.documentElement.clientHeight)?document.documentElement.clientHeight:
		(document.body.clientHeight)?document.body.clientHeight:0;	
}
function riposiziona(){
	var el=document.getElementById('Layer2')
	el.style.top=(rH-265)+'px';
	el.style.left=(rW-340)+'px';
	el.style.visibility='visible';
	readyToResize=true;
}
</script>


</head>
<body onresize="if(readyToResize){riposiziona();}">
<div id="Layer1" style="position:absolute; width:340px; height:265px; z-index:1; left: 0; top: 0;">[img]img/fondo_l_t.jpg[/img]</div>
<div id="Layer2" style="position:absolute; width:340px; height:265px; z-index:2; left: 0px; top: 0px;">[img]img/fondo_r_d.jpg[/img]</div>
<script type="text/css">riposiziona()</script>
</body>
</html>

**Xinod** · 16-09-2004, 20:48

scusa, un paio di sviste

function riposiziona(){
var el=document.getElementById('Layer2')
el.style.top=(rH()-265)+'px';
el.style.left=(rW()-340)+'px';
el.style.visibility='visible';
readyToResize=true;
}

e questo
<script type="text/css">riposiziona()</script>
è chiaramente
<script type="text/javascript">riposiziona()</script>

ciao

**cichity74** · 17-09-2004, 12:56

Ho sostituito le parti da te indicate ma non mi funziona…… :master:
Per chiarezza ti allego le immagini…Link Allegato
Sono compresse in 7-zip (http://www.7-zip.org/it/)

Potresti postarmi il codice completo
Ciao e grazie

cichity74

**cichity74** · 17-09-2004, 13:06

ok..mi funziona avevo scritto qualche...

nel validare la pagina (XHTML 1.0 Transitional) mi da questo errore
(Il tag "body" non ha un attributo "onresize" nelle versioni attualmente attive.)
corrispondente a questa linea:
<body onresize="if(readyToResize){riposiziona();}">

:master:

**Xinod** · 17-09-2004, 16:09

toglilo dal tag body e prova ad inserire nella parte di script nell' head

codice:

window.onresize=function(){if(readyToResize){riposiziona()}};

ciao

**cichity74** · 17-09-2004, 17:30

Ti ringrazio per l'aiuto ora funziona perfettamente e passa la validazione

una sola curiosità l'ultima function che mi hai suggerito:

codice:

window. onresize=function(){if(readyToResize){ri
posiziona()}};

lo modificata cosi

codice:

window.onresize=function(){
	if(readyToResize){
		riposiziona();
	}
}

quale delle due è più conforme a java script (mi riferisco al punto e virgola)

Ciao e di nuovo grazie

cichity74

Discussione: [ javascript ] - Rivelare area disponibile.

Strumenti discussione

Ricerca discussione

Visualizza

[ javascript ] - Rivelare area disponibile.

Permessi di invio