Prime armi con Prototype.

[sgabello]

Ciao a tutti!
Sto iniziando a smaneggiare con Prototype (come sintassi è molto simile a Actionscript, per cui dovrei cavarmela).
Pero' mi sono già bloccato... tentando di recuperare la larghezza di un DIV.

          <script>
			Event.observe(window, 'load', init, false);
			function init(){
				var galleryDiv = document.getElementsByClassName('slider');
				var s = '';
				for(var i=0; i<galleryDiv.length; i++){
					var widthAmount = galleryDiv[i].getElementsByClassName('list').getWidth();
					alert(widthAmount);
				}
			}
		  </script>

Non mi appare nessun alert... eppure mi sembra corretto... l'html è questo:

<div class="linea slider" id="tabcont_foto">
            <div class="arrow"><a>[img]../images/btn_indietro.gif[/img]</a></div>
			
            <div class="list">
              <ul>[*][img]../images/mook_thumb.jpg[/img]
                  

Utente1</p>
                [*][img]../images/mook_thumb.jpg[/img]
                  

Utente2</p>
                [*][img]../images/mook_thumb.jpg[/img]
                  

Utente3</p>
                [*][img]../images/mook_thumb.jpg[/img]
                  

Utente4</p>
                [*][img]../images/mook_thumb.jpg[/img]
                  

Utente5</p>
                [*][img]../images/mook_thumb.jpg[/img]
                  

Utente6</p>
                [*][img]../images/mook_thumb.jpg[/img]
                  

Utente7</p>
                [*][img]../images/mook_thumb.jpg[/img]
                  

Utente8</p>
                [*][img]../images/mook_thumb.jpg[/img]
                  

Utente9</p>
                [/list]
            </div>
            <div class="arrow"><a>[img]../images/btn_avanti.gif[/img]</a></div>
            <br class="floatclear" />
          </div>

Dove sbaglio?

[Andrea1979]

sei sicuro che esista un getElementsByClassName? di sicuro ci sono un getElementById e un getElementsByTagName... poi non essendo un esperto, magari l'hanno aggiunto da "poco" ed è passato, a me, inosservato.

In più aggiungerei che hai un class con valore con spazio (male), ammesso e non concesso che esista getElementsByClassName, non esiste un elemento con classe "slider"... insomma ci sono due o tre cosette che comunque non dovrebbero poter far girare lo script.

[sgabello]

perdonami... ma sbagli tu alcune cosette!

Allora...

1) innanzitutto il div non ha una classe con uno spazio... ma due classi distinte: linea e slider
Forse non lo sapevi ma si possono attribuire classi multiple ad ogni elemento. ps: se non credi a me... così su due piedi... mi viene in mente la homepage di Tiscali... guarda il codice.

2) la libreria prototype ha una serie di metodi ed oggetti che estendono le normali di js.
getElementsByClassName è uno di questi... : http://www.prototypejs.org/api/eleme...ntsByClassName
Tant'è che se giro il tutto così:

<script>
Event.observe(window, 'load', init, false);
function init(){
  var galleryDiv = document.getElementsByClassName('slider');
  for(var i=0; i<galleryDiv.length; i++){
    var listDiv = galleryDiv[i].getElementsByClassName('list');
    alert(listDiv.inspect());
  }
}
</script>

funziona tutto a meraviglia restituendomi gli inspect su i due div.

Il problema quindi credo sia legato a getWidth o a come lo uso...

il resto è (dovrebbe) essere corretto.

[Andrea1979]

buono a sapersi. Comunque, sempre che non sia qualche altra menata di prototype, visto che non esiste un getWidth() per tags, dovresti leggere la proprietà width assegnata al tuo div, e visto che non è assegnata sul div stesso, dovrai andare a lavorare sul CSS.

[sgabello]

uhm... interessante... mi spieghi queste due frasi? Cosa intendi dire?

- sempre che non sia qualche altra menata di prototype.
- visto che non esiste un getWidth() per tags

nel css avevo dichiarato la width...

div#main .group2 .slider .list{overflow: hidden; float: left; width: 624px; margin: 0 5px; position: relative;}

[floyd]

a naso direi che questa istruzione non funziona
galleryDiv[i].getElementsByClassName('list').getWidth()
immagino che getElementsByClassName restituisca un array dunque dovresti fare un ciclo

[Andrea1979]

ecco, le proprietà che assegni ad un tag in un css non sono "facilmente" accessibili come se invece fossero scritte direttamente nel tag... esempio banale

<html>
<head>
<style type="text/css">
#terzo {
   width: 200px;
   height: 200px;
}
</style>
<script language="javascript">
window.onload = function() {
  alert("Primo: "+document.getElementById('primo').width+"\n"+
        "Secondo: " + document.getElementById('secondo').width+"\n"+
        "Secondo bis: "+ document.getElementById('secondo').style.width + "\n"+
        "Terzo: " + document.getElementById('terzo').width + "\n"+
        "Terzo bis: " + document.getElementById('terzo').style.width);
}
</script>
</head>
<body>
<div id="primo" width="400" height="300"><h1>Primo</h1></div>
<div id="secondo" style="width:200px;height=100px"><h1>Secondo</h1></div>
<div id="terzo"><h1>Terzo</h1></div>
</body>
</html>

la spiegazione: visto che non conosco prototype, chiedevo se tra le varie menate della libreria ci fosse anche un getWidth() che si occupasse di fare i vari tentativi di recupero della proprietà width senza che uno lo debba fare a manina come ho fatto nell'esempio lì sopra (che tra l'altro non è completo, visto che manca la parte noisa: parsing del CSS e recupero del valore richiesto)

[Andrea1979]

Originariamente inviato da floyd
a naso direi che questa istruzione non funziona
galleryDiv[i].getElementsByClassName('list').getWidth()
immagino che getElementsByClassName restituisca un array dunque dovresti fare un ciclo

ecco la risposta.
suppongo quindi che:

getElementsByClassName('list')[0].getWidth()

dovrebbe bastare, altra cosa buona a sapersi.

[sgabello]

Originariamente inviato da floyd
a naso direi che questa istruzione non funziona
galleryDiv[i].getElementsByClassName('list').getWidth()
immagino che getElementsByClassName restituisca un array dunque dovresti fare un ciclo

MA PORCA DI QUELLA ....
Perchè ogni tanto mi perdo in queste cose così stupide? MANNAGGIA!!! HAI RAGIONE!!!!!!!!!!

Che sia di un solo elemento... rimane cmq un array!!! MA CACCHIOOOOOOOOOOO!!!!

con un bel

alert(listDiv[0].getWidth());

ho risolto tutto!!!


Grazie mille!!! Davvero... da solo non me ne sarei mai accorto... ma cazzarola!!!

grazie grazie!

[sgabello]

Continuo a studiare... ora mi sono incantato su Event.observe e il passaggio di parametri...
esempio:

var message = 'ciao';
Event.observe(arrowDiv[0], 'click', function(message){alert(message);});

qui... non è una svista... è proprio che dalla documentazione non capisco come devo fare (struttura e sintassi) per farlo funzionare... ho proprio sparato a caso!

Come dovrebbe essere scritto correttamente?

Grazie ancora!