MOOTOOLS - Div a comparsa e scomparsa

**cleverboy** · 03-10-2009, 20:05

Ciao
ecco un po' di codice:

codice:

---- CSS ----
a.domanda {display:block}
.visibile {display:block}

----- JS -----
window.addEvent('domready', function(){
	var openDiv = 0;
	$$('div.risposta').each(function(risp){
	    risp.setStyle('display','none');
  	});
	
	$$('a.domanda').each(function(domanda) {
		domanda.addEvent('click', function(event){
		  var selDiv = this.getNext().id;
		  if(selDiv == openDiv) {
			// div already open.. close it
			$(selDiv).setStyle('display','none');
			openDiv=0;
		  }
		  else {
			if(openDiv)
				$(openDiv).setStyle('display','none');
			
			$(selDiv).set('morph', {
				duration: 1000
			});
			$(selDiv).morph('.visibile');


			openDiv=selDiv;
		  }
		  return false;
		});
	});
	
});



------ HTML --------

<body>
<div id="questions">
   Domanda 1.
   <div class="risposta" id="r1">Risposta 1.
testo della risposta</div>

   Domanda 2.
   <div class="risposta" id="r2">Risposta 2.
testo della risposta</div>

</div>
</body>

Il codice è incompleto... ma l'effetto è questo:
se clicco su un "link.domanda" appare un "div.risposta".
Questo lo so fare..

Non riesco invece a fare in modo che la risposta appaia lentamente, come se si srotolasse.
Lo sapevo fare con jQuery ma per esigenze che non sto a spiegarvi devo usare Mootools.

Il modo c'è di sicuro...ma è la prima volta che uso mootools e non so esattamente dove mettere le mani con i tween e i morph.

Aiutino?

**cleverboy** · 06-10-2009, 21:33

Novità.

Sono arrivato quasi alla soluzione con questo codice:

codice:

---- JS ----
window.addEvent('domready', function(){
	var openItem=null;
	
	$$( '.qWrapper' ).each(function(item){
		var thisSlider = new Fx.Slide( item.getElement( '.risposta' ), { duration: 300 } );
		thisSlider.hide();
		item.getElement( '.domanda_ext' ).addEvent( 'click', function(){ 
			var currItem = "risp"+this.id;
			if(currItem == openItem) {
				thisSlider.slideOut();
				openItem=null;
			}				
			else {

				if(openItem){
					var oldSlider = new Fx.Slide( openItem, { duration: 300 } );
					openItem.slideOut(); 
					
				}

				thisSlider.slideIn();
				openItem=currItem;
			}
			return false;
		});
	});
});


--- HTML ---
<div id='domande'> 
	<div class='dom_su'></div> 
	
	<div class="qWrapper">
		Che cosa contiene la cannabis
		<ul class='risposta' id='risp1'>
			[*]Voce1
			[*]Voce2
			[*]Voce 3
			[*]Voce 4
		[/list]
	</div>
	
	<div class="qWrapper">
		Che cosa contiene la cannabis
		<ul class='risposta' id='risp2'>
			[*]Voce 1
			[*]Voce 2
		[/list]
	</div>
	<div class="qWrapper">
		Che cosa contiene la cannabis
		<ul class='risposta' id='risp3'>
			[*]Voce 1
			[*]Voce 2
			[*]Voce 3
		[/list]
	</div>
		
	<div class='dom_giu'></div> 
</div>

Precisazione importante. Non posso usare mootools v1.2.3 (l'ultima) perché incompatibile con una parte del sito sviluppata da altre persone.. dunque mi devo accontentare della versione precedente.

Detto ciò, guardate le righe in grassetto nel Javascript e spiegatemi perché se premo su un link (il primo) e poi premo un altro (il secondo) succede che il primo sparisce ma lo spazio rimane vuoto e bianco.

Con Firebug ho notato che quando funziona normalmente (clicco il primo e lo riclicco) viene creato un div intorno alla parte da nascondere/visualizzare; se invece clicco su due link diversi vengono creati 2 div invece di 1 solo, effetto credo della linea

var oldSlider = new Fx.Slide( openItem, { duration: 300 } );

come se creasse uno slider su uno slider esistente.
Come risolvereste la faccenda?

Purtroppo con la versione nuova e il pacchetto mootools-more funziona da Dio ma non lo posso usare!!! per colpa di un componente (videobox) che funziona solo con la vecchia versione!

AIUUUUTOOOOO!

Discussione: MOOTOOLS - Div a comparsa e scomparsa

Strumenti discussione

Ricerca discussione

Visualizza

MOOTOOLS - Div a comparsa e scomparsa

Permessi di invio