Istanze multiple di Fx.Slide verticale (MooTools)

[amst3rdam1978xx]

Ciao, ho un problema con l'effetto slide. Ne ho due verticali in una pagina, ma solo il primo dei due funziona, oppure se rimuovo il primo, funziona solo il secondo. Vorrei semplicemente che funzionassero entrambi.

Ovviamente ho dato id univoci e ho aggiunto una funzione nuova appositamente per il secondo effetto slide, mi aspettavo che funzionasse, non mi sembra una cosa così complessa, ma evidentemente ho tralasciato qualche cazzatina. C'è da dire anche che non conosco perfettamente il MooTools, lo sto studiando ora e sto facendo pratica con qualche effetto di base.

Questo è il codice della porzione di pagina che contiene l'effetto:

[...]
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
[...]
<div id="content_both">
	<table width="970" border="0" cellspacing="0" cellpadding="0">
		<tr>

		<td width="490" valign="top">
		<div id="content_sx">
			<div id="vertical_slide1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
			<div>Chiudi | Leggi tutto</div>
		</div>
		</td>
	
		<td width="480" valign="top">
		<div id="content_dx">
			<div id="vertical_slide2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
			<div>Chiudi | Leggi tutto</div>
		</div>
		</td>

		</tr>
	</table>
</div>
[...]

Mentre questo è il contenuto di slide.js:

window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	
	
	//-vertical 1

	var myVerticalSlide1 = new Fx.Slide('vertical_slide1');
	myVerticalSlide1.hide();

	$('v1_slidein').addEvent('click', function(e){
		e.stop();
		myVerticalSlide1.slideIn();
	});

	$('v1_slideout').addEvent('click', function(e){
		e.stop();
		myVerticalSlide1.slideOut();
	});

	$('v1_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide1.toggle();
	});

	$('v1_hide').addEvent('click', function(e){
		e.stop();
		myVerticalSlide1.hide();
		$('vertical_status1').set('html', status[myVerticalSlide1.open]);
	});
	
	$('v1_show').addEvent('click', function(e){
		e.stop();
		myVerticalSlide1.show();
		$('vertical_status1').set('html', status[myVerticalSlide1.open]);
	});
	
	// When Vertical Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myVerticalSlide1.addEvent('complete', function() {
		$('vertical_status1').set('html', status[myVerticalSlide1.open]);
	});


	//-vertical 2

	var myVerticalSlide2 = new Fx.Slide('vertical_slide2');
 	myVerticalSlide2.hide();

	$('v2_slidein').addEvent('click', function(e){
		e.stop();
		myVerticalSlide2.slideIn();
	});

	$('v2_slideout').addEvent('click', function(e){
		e.stop();
		myVerticalSlide2.slideOut();
	});

	$('v2_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide2.toggle();
	});

	$('v2_hide').addEvent('click', function(e){
		e.stop();
		myVerticalSlide2.hide();
		$('vertical_status2').set('html', status[myVerticalSlide2.open]);
	});
	
	$('v2_show').addEvent('click', function(e){
		e.stop();
		myVerticalSlide2.show();
		$('vertical_status2').set('html', status[myVerticalSlide2.open]);
	});
	
	// When Vertical Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myVerticalSlide2.addEvent('complete', function() {
		$('vertical_status2').set('html', status[myVerticalSlide2.open]);
	});
});

(le parti myVerticalSlide1.hide(); e myVerticalSlide2.hide(); le ho aggiunte io perché partissero nascosti)

In questa pagina convivono perfettamente le due istanze (anche se sono vertical e horizontal il mio problema non cambia): demo di Fx.Slide, nel mio caso cos'è che cambia? Boh.

Se ho dimenticato di postare del codice, fatemelo pure notare, e se mi trattate come un n00b non mi offendo, purché mi diate una mano a capire, grazie!

[amst3rdam1978xx]

Problema risolto. E' bastato cambiare il js così:

window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	
	//-vertical 1

	var myVerticalSlide1 = new Fx.Slide('vertical_slide1');
	myVerticalSlide1.hide();

	$('v1_slidein').addEvent('click', function(e){
		e.stop();
		myVerticalSlide1.slideIn();
	});

	$('v1_slideout').addEvent('click', function(e){
		e.stop();
		myVerticalSlide1.slideOut();
	});

	//-vertical 2

	var myVerticalSlide2 = new Fx.Slide('vertical_slide2');
 	myVerticalSlide2.hide();

	$('v2_slidein').addEvent('click', function(e){
		e.stop();
		myVerticalSlide2.slideIn();
	});

	$('v2_slideout').addEvent('click', function(e){
		e.stop();
		myVerticalSlide2.slideOut();
	});
});

In pratica dovevo solo rimuovere gli eventi che ho scelto di escludere dalla mia pagina, e cioè toggle, hide, show e la visualizzazione dello status.

Dubito che questa mia scoperta possa essere utile a qualcuno, ma ho ritenuto giusto segnalare che ho trovato da solo una soluzione, per evitare a qualcuno di perderci tempo, effettivamente era una cavolata. Chiedo scusa, ma è agosto anche per me e sono a lavorare...

Chiudete pure o eliminate il thread, fa lo stesso.