[mootools] aiuto per principiante

[Sergio P.]

Ciao a tutti, ho scritto questo semplice codice con MooTools:

var fximg01 = $('img01');
fximg01.set('tween', {duration: 200})
			
$('img01').addEvent('mouseenter', function(e) {
	e.stop();
	fximg01.tween('opacity', 0.6);
});
			
$('img01').addEvent('mouseleave', function(e) {
	e.stop();
	fximg01.tween('opacity', 1);
});

Cosa fa: prende un tag A che ha id="img01" e al passaggio del mouse sopra se stesso lo rende leggermente trasparente. Quando il mouse esce lo fa tornare normale.

La domanda è questa: se io nella mia pagina ho per ipotesi 10 elementi che devono avere questo effetto, che codice devo scrivere (oltre che ripetere per 10 volte quel codice incrementando il numero dell'id)?

Grazie a chi mi sarà d'aiuto.

Sergio

[artorius]

decisamente no, utilizzi i selector per ottenerli in un array ed applichi una funzione su ciascun elemento:

Applica ad ogni tag dove vuoi questo effetto la class="MooFading"

//Questo immagino tu sappia cosa fa
window.addEvent('domready', function(){
   //Questo selettore ottiene un array con tutti gli elementi che corrispondono
   //Alla regola di CSS passata
   //.each() è una funzione che hanno gli array di Mootools per eseguire una funzione su ogni 
   //elemento dell'array, passando come parametri all'array l'elemento, l'indice dell'elemento 
   //nell'array e l'array stesso.
   $$('a.MooFading').each(function(item){
      //In item ho l'elemento 0 al primo ciclo, 1 al secondo e cosi via
      item.set('tween', {duration: 200});
      //addEvents prende in ingresso un oggetto e fa praticamente n volte addEvent
      item.addEvents({
          'mouseenter' : function(e){
             //preventDefault è più efficace di stop
             e.preventDefault();
             //Qui ho messo this perché lo scope della funzione è l'element
             this.tween('opacity', 0.6);
          },
          'mouseleave' : function(e){
             e.preventDefault();
             this.tween('opacity', 1);
          }
      });
   })
}); 

[Sergio P.]

Grazie mille. E' proprio quello che mi serviva, non avrei mai sperato di trovare qualcuno che me la servisse così su un piatto d'argento!

[webdevaster]

.. io ho un problema simile, ma con dati che vengono prelevati da un db.

la lettura di questi dati mi generano del codice con all'interno:

Titolo: Mio titolo
Descrizione: testo testo testo testo testo testo ... (continua)

al click su continua vorrei che l'altezza aumentasse rivelando tutto il contenuto della descrizione.

Poniamo che io abbia 10 box con Titolo e Descrizione come scritto sopra, e che ad ogni box io assegni un ID lato server, è possibile associare ad ogni link "continua" una funzione Fx.Styles?

..spero di essermi spiegato..

grazie!

[artorius]

allora, immagino che il codice sia simile a questo:

<div id="div1">
Blablabla
Nascondi
</div>
continua...
...
<div id="divN">
Blablabla
Nascondi
</div>
continua...

Mettici le classi in questo modo (le classi non cambiano da un elemento all'altro)

<div id="div1" class="MooSlide">
blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

<a href="#" class="MooHide">
Nascondi
</a>
</div>
<a href="#" class="MooShow">
Continua
</a>
<div id="div2" class="MooSlide">
blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

blablabla

<a href="#" class="MooHide">
Nascondi
</a>
</div>
<a href="#" class="MooShow">
Continua
</a> 

come CSS dovrebbe bastare:

.MooSlide{
   height : 50px;
   overflow: hidden;
}
.MooHide{
   display: block;
} 

A questo punto fai (Nota Io uso Mootools1.2):

var hides, divs, shows;
window.addEvent('domready', function(){
   divs = $$('div.MooSlide');
   divs.each(function(item){
      item.set('tween', {duration: 500, transition : Fx.Transitions.Elastic.easeOut});
   });
   hides = $$('a.MooHide')
   hides.each(function(item, index){
      item.addEvent('click', function(e){
         e.preventDefault();
         divs[index].tween('height', 50);
         shows[index].setStyle('display', 'block');
      });
   });
   shows = $$('a.MooShow');
   shows.each(function(item, index){
      item.addEvent('click', function(e){
         e.preventDefault();
         var height = hides[index].getPosition(hides[index].getParent()).y + hides[index].getSize().y
         divs[index].tween('height', height);
         this.setStyle('display', 'none');
      });
   })   
}); 

[webdevaster]

Grazie mille!!!

Provo e poi farò sapere ...

[webdevaster]

probabilmente faccio dei casini... comunque quando clicco su "continua" il testo cambia altezza ma rimane con overflow: hidden e quindi si nasconde dietro agli altri, invece di spostarli giù.... ??

[artorius]

ehr, se fa così è perché i div con class="MooSlide" sono in un altro elemento con height fissa e non auto, non puoi usare solo la mia struttura?

[webdevaster]

eh purtroppo devo tenerli in un div con height fissa alla quale imposto il valore overflow: hidden appunto per non far vedere tutto il contenuto... perché altrimenti non saprei come fare il "gioco" che mi permette, prima, di far vedere un tot di caratteri e poi, dopo aver cliccato "continua", di farli vedere tutti..

[artorius]

è il div con class="MooSlide" ad avere overflow hidden al quale poi modificherai l'altezza