Newsgroup: it.comp.lang.javascript
Titolo: ridimensionare oggetti con jquery

 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<script type="text/javascript" src="./123.php_files/jquery.js"></script>
 
 
 
     <script language="javascript" type="text/javascript">
 
		// al caricamento della pagina dimensiono...
 
		$(document).ready(function () {
 
			resize()
 
		});
 
 
 
		// anche al ridimensionamento della window ridimensiono...
 
		$(window).resize(function () {
 
			resize()	
 
		});
 
 
 
		function resize() {
 
			perc = 80/100
 
 
 
			boxWidth = document.documentElement.clientWidth * perc
 
			boxHeight = document.documentElement.clientHeight * perc
 
 
 
			console.log(document.body.childNodes[1])
 
			box = document.body.childNodes[1]
 
			resizeObject(box, boxWidth, boxHeight)
 
 
 
				boxTopHeight = 25
 
 
 
				boxTop = box.childNodes[1]
 
				resizeObject(boxTop, boxWidth, boxTopHeight)			
 
 
 
					boxTopCloseButton = boxTop.childNodes[1]
 
 
 
					resizeObject(boxTopCloseButton, 60, boxTopHeight)			
 
					boxTopCloseButton.style.fontSize = boxTopHeight-10 + 'px'
 
 
 
				boxBody = box.childNodes[3]
 
 
 
				boxBodyHeight = boxHeight - boxTopHeight
 
				if (boxBodyHeight < 0) boxBodyHeight = 0
 
 
 
				resizeObject(boxBody, boxWidth, boxBodyHeight)			
 
		}
 
 
 
		function resizeObject(ref, width, height) {		
 
			$(ref).width(width)
 
			$(ref).height(height)
 
		}
 
     </script>
 
</head>
 
 
 
<body>
 
	    <div style="position: fixed; left: 10%; top: 10%; background-color: 
red;">
 
	        <div style="background-color: green; "align="right">
 
	            <button >Chiudi</button>
 
	        </div>
 
 
		<iframe width="100%"></iframe>
 
	   </div>
 
 
 
</body>
 
</html>
 
 
Come vedete abbiamo:
- un div che contiene:
	- un div
	- un iframe
 
 
I tre oggetti vanno dimensionati dinamicamente.
 
Con Chrome tutto avviene correttamente.
 
Invece con Firefox c'è l'errore, in console:
Data e ora: 09/06/2012 10:58:06
Errore: TelemetryStopwatch: key "FX_SESSION_RESTORE_COLLECT_DATA_MS" was 
already initialized
File sorgente: resource://gre/modules/TelemetryStopwatch.jsm
Riga: 53
 
Come mai?


 
È un sistema per creare presentazioni in HTML5, la cosa che per te
potrebbe essere interessante studiare è il sistema di resize: come vedi
se scarichi e provi il demo, il contenuto della pagina viene aggiustato
in proporzione alla dimensione della finestra stessa.
 
Hope it helps.

On 09/06/2012 10:59, alex wrote:
 >...
 
comunque ho tratto spunto da qui
http://www.dotnethell.it/tips/Resize-DIV-Jquery.aspx
 
 
Ecco il codice originale:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html>
<head>
<title>Pagina con tabella 100%</title>
<style>
body
{
margin: 0 0 0 0;
}
table
{
width: 100%;
height: 100%;
background-color: red;
border: 1px solid #000;
}
</style>
 
<script language="javascript" type="text/javascript" 
src="
http://code.jquery.com/jquery-1.7.2.js
"></script>
<script language="javascript" type="text/javascript">
// al caricamento della pagina (document ready) eseguo gli script
$(document).ready(function (){
// accedo al div con id divEsteso (notare il #) e ne modifico le 
proprietÃ  height e width
$("#divEsteso").width($(window).width())
$("#divEsteso").height($(window).height())
});
 
$(window).resize(function () {
// ridimensiono il div anche al cambiamento della window
$("#divEsteso").width($(window).width())
$("#divEsteso").height($(window).height())
});
</script>
 
</head>
<body>
<table>
<tr>
<td>Allargata e allungata al massimo</td>
</tr>
</table>
</body>
</html>
-------------------------
 
Il resize viene fatto, ma Firefox l'errore lo dà sempre. Se tutto 
funziona potrei anche "fregarmene", ma per fare le cose per bene...

 sono arrotondati per default.
 
infatti avevo questo dubbio.
 
Domanda:
C'è un modo per far adattare il font (in modo proporzionale) alla 
larghezza/altezza del bottone?


 larghezza/altezza del bottone?
 
No. Puoi usare Javascript per vedere l'altezza del box e impostare la 
font-size di conseguenza, ma per la larghezza  devi andare a tentativi 
(imposta un font-size, scrivere il testo, misurarlo, se non va bene 
cambiare il font-size, rimisurarlo, ecc.)
 
Bye.

 ridimensionarla) ha gia` piu` significato di resizeDomBodyElements()
 
ok, c'è sempre da imparare ;)

 larghezza/altezza del bottone?
 
Si e no. No, nel senso che non puoi fare specificatamente quello che
chiedi; si, che puoi ottenere comunque un risultato simile: guardati
l'esempio sulle slide che ti ho dato.