script modifica layout

**nourdine** · 02-12-2006, 16:20

hello. ho scritto uno script che, chiaramente, non funziona. Eccolo (breve spiegazione: una ancora di pagina richiama la funzione change() che a sua volta, ulla base di alcune rilevazioni che essa stessa compie, richiama alternativamente la funzione stringi() o la funzione allarga()):

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Untitled Page</title>

<script type="text/javascript">

	function stringi(){	
		var colonna1 = document.getElementById("colonna1");
		var colonna2 = document.getElementById("colonna2");
		var corpo = document.getElementById("corpo");
				
		var larg1 = colonna1.style.width;
		var larg2 = colonna2.style.width;
		var larg_c = corpo.style.width;
				
				
		// per fermare la funzione di restringimento
		if(larg1 = larg2 == "0"){
			window.clearInterval(x);
			colonna1.style.width = colonna2.style.width = "none";
			}
					
			colonna1.style.width = colonna2.style.width = (parseInt(larg1) - 1) + 'px';
			corpo.style.width = (parseInt(larg_c) + 2) + 'px';
		}
		
		
	function allarga(){	
		var colonna1 = document.getElementById("colonna1");
		var colonna2 = document.getElementById("colonna2");
		var corpo = document.getElementById("corpo");
				
		var larg1 = colonna1.style.width;
		var larg2 = colonna2.style.width;
		var larg_c = corpo.style.width;
				
				
		// per fermare la funzione di allargamento
		if(larg1 = larg2 == "0px"){
			window.clearInterval(x);
			colonna1.style.width = colonna2.style.width = "none";
			}
					
			colonna1.style.width = colonna2.style.width = (parseInt(larg1) + 1) + 'px';
			corpo.style.width = (parseInt(larg_c) - 2) + 'px';
		}


	function change(){
		var colonna1 = document.getElementById("colonna1");
		  
        if(colonna1.style.display == 'none') {
			x = window.setInterval("allarga()", 10);
			}
			          
		else {
			x = window.setInterval("stringi()", 10);
			}
		}
				
</script>

<style type="text/css">
body {margin: 0px; padding: 0px;}

#overhead {width: 100%; background: #000; padding: 5px 0px; font-weight: bold;}

#overhead, #overhead a {color: #fff;}

#header {width: 100%; color: red; font-size: 80px; background: #CCCCCC;}

.colonna1 {float: left; width: 200px; height: 400px; background: yellow; padding: 10px;}

.corpo {float: left; width: 400px; height: 400px; background: #CBF5E0; padding: 10px;}

.colonna2 {float: left; width: 200px; height: 400px; background: pink; padding: 10px;}

h3 {margin: 0px; padding: 0px;}

#footer {clear: both; width: 100%; background: #00FF00;}
</style>

</head>
<body>

 

<div id="overhead">show/hide columns << ecco il controllo del javascript </div>

<div id="header">Javascript &amp; CSS</div>

<div id="container">

<div id="colonna1" class="colonna1"><h3>ciao world! this is the left column</h3></div>

<div id="corpo" class="corpo">this is the main column!!!!!! you know ... the one conveying the most important information in the website.</div>

<div id="colonna2" class="colonna2"><h3>ciao world! this is the right column</h3></div>

</div>

<div id="footer">And this is the footer. All right reserved</div>

</body>
</html>

**Xinod** · 02-12-2006, 17:00

scusa ma perche' siamo stati a parlare di offsetHeight e di come rilevare lo spazio fisicamente occupato da un elemento se poi cerchi di fare
var larg1 = colonna1.style.width;

per evitare ulteriori fraintendimenti, puoi rilevare la larghezza dallo style, ma solo in 2 casi:
- e' definita nello stile in linea, niente da css esterni a meno di complicarsi la vita con l' oggetto stylesheets
- e' stato precedentemente settato da javascript

mi sono fermato li'..

**nourdine** · 02-12-2006, 19:15

vero cazzo. js non legge proprietà settate con css. Ecco perche il debugger mi dava propietà width assente! allora devo usare un off set per la largezza. indovino: offsetWidtgh?

**nourdine** · 02-12-2006, 19:52

ho modificato lo script come segue. adesso non da più errori. il debugger tace! solo che i risultati che offre non sono quelli aspettati. tutte e tre le colonne si allargano: boh!?!?

codice:

<script type="text/javascript">

	function stringi(){	
		var colonna1 = document.getElementById("colonna1");
		var colonna2 = document.getElementById("colonna2");
		var corpo = document.getElementById("corpo");
				
		var larg1 = colonna1.offsetWidth;
		var larg2 = colonna2.offsetWidth;
		var larg_c = corpo.offsetWidth;
				
		// per fermare la funzione di restringimento
		if(larg1 == "0px" && larg2 == "0px"){
			window.clearInterval(x);
			colonna1.style.width = "none"; 
			colonna2.style.width = "none";
			}
					
			colonna1.style.width = (parseInt(larg1) - 1) + 'px';
			colonna2.style.width = (parseInt(larg2) - 1) + 'px';
			corpo.style.width = (parseInt(larg_c) + 2) + 'px';
		}
		
		
	function allarga(){	
		var colonna1 = document.getElementById("colonna1");
		var colonna2 = document.getElementById("colonna2");
		var corpo = document.getElementById("corpo");
		
		// faccio riapparire le colonne
		colonna1.style.width = "block"; 
		colonna2.style.width = "block";		
		
		var larg1 = colonna1.offsetWidth;
		var larg2 = colonna2.offsetWidth;
		var larg_c = corpo.offsetWidth;
				
				
		// per fermare la funzione di allargamento
			if(larg1 == "220px" && larg2 == "220px"){
			window.clearInterval(x);			
			}
					
			colonna1.style.width = (parseInt(larg1) + 1) + 'px';
			colonna2.style.width = (parseInt(larg2) + 1) + 'px';
			corpo.style.width = (parseInt(larg_c) - 2) + 'px';
		}


	function change(){
		var colonna1 = document.getElementById("colonna1");
		  
        if(colonna1.style.display == 'none') {
			x = window.setInterval("allarga()", 1);
			}
			          
		else {
			x = window.setInterval("stringi()", 2000);
			}
		}
				
</script>

**Xinod** · 03-12-2006, 16:37

un paio di errori, che pero' eseguendo un minimo di debug potresti cogliere da solo
(basta un document.title=larg1 per capire che l' incremento non e' di 1px come vorresti)

1.
quando chiedi l' offsetWidth in questo valore e' incluso il padding, quando setti lo style.width il padding viene aggiunto dopo

offsetWidth di colonna1 e' 220 (200 + 10 + 10)
setti il width a 221
si aggiunge il padding e il risultato finale diventa 241px

ripeti il ciclo
offset=241
width=242
finale=262

per questo anche la colonna centrale aumenta (ma meno delle laterali)
primo passaggio
offset=440
width=438
finale=458

secondo passaggio
offset=458
width=456
finale=476

aumenta di 18px ad ogni intervallo invece di ridursi di 2

inserisci in entrambi i casi una correzione che sottragga all' offset il padding (left+right, quindi 20)

2.
offsetWidth non ha "px", e' direttamente un valore numerico, non serve il parseInt, allo stesso modo non puoi in una struttura condizionale verificare che sia =="npx" ma ==n

3.
errore di distrazione in
colonna1.style.width = "none"; o colonna2.style.width = "block";
dove chiaramente intendi settare il display

ci sarebbero altre cose da dire, che sicuramente sperimenterai andando avanti

**nourdine** · 04-12-2006, 18:07

adesso ho corretto ma la funzione segunte mi da l'errore: Errore: Errore nell'interpretazione del valore della proprietà 'width'. Dichiarazione tralasciata.
File sorgente: file:///G:/@@@/my_javascript/hide_columns_graduale.html#
Riga: 0

codice:

	function stringi(){	

		var colonna1 = document.getElementById("colonna1");
		var colonna2 = document.getElementById("colonna2");
		var corpo = document.getElementById("corpo");
				
		var larg1 = colonna1.offsetWidth;
		var larg2 = colonna2.offsetWidth;
		var larg_c = corpo.offsetWidth;
		
		// routine di restringimento
		colonna1.style.width = ((larg1 - 5) - 20) + 'px';
		colonna2.style.width = ((larg2 - 5) - 20) + 'px';
		corpo.style.width = ((larg_c + 10) - 20) + 'px';
		 			
		// per fermare la funzione di restringimento
		if(larg1 == "20" && larg2 == "20"){ // questa è la misura di offset che contiene il padding - insomma qui è width = 0
			window.clearInterval(x);
			colonna1.style.display = "none"; 
			colonna2.style.display = "none";
			// corpo.style.width = "840px";
		}
	}

ma non ho cercato di leggere proprietà css con javascript e non istanziate via javsacript stesso. Quindi non capisco perchè mi dà errore di interpretazione!

Discussione: script modifica layout

Strumenti discussione

Ricerca discussione

Visualizza

script modifica layout

Permessi di invio