Utilisation Fx.Slide Mootools

**Woote** · 11/11/2008, 01h01

Bonjour,
Pour commencer je préviens que je commence a peine a découvrir le java script donc je comprend que le code, pour ce qui est de réaliser des choses a partir de zéro je ne sait pas le faire (pour l'instant ^^) donc veuillez m'excusez des questions que je pourrait générer par la suite.

Je tente de réaliser une site web assez simple et plutôt agréable visuellement, pour cela je me suis rabattu sur le site de mootools, plus sympa et bien expliqué.

Mon soucis est le suivant :
J'ai décidé d'utiliser l'effet Fx.slide, seulement voila... j'essaye de faire en sorte d'afficher plusieurs bloc de texte, chose facile, mais pour qu'ils soient par la suite gérer par le javascript impossible... Le premier bloc fonctionne mais pour les autres impossibles.

Donc d'où vient le problème ? de l'html ? ou du js ?
Je pense que le soucis vient du faite du nom des variables, mais je ne sait pas lesquels changer malgré plusieurs tests.

Partie HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
<body>
	<h1>Fx.Slide</h1>	
 
	<div class="marginbottom">
		<a id="h_toggle" href="#">toggle</a> | <strong>status</strong>: <span id="horizontal_status">open</span>
	</div>
	<div id="horizontal_slide">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div>
 
	<div class="marginbottom">
		<a id="h_toggle" href="#">toggle</a> | <strong>status</strong>: <span id="horizontal_status">open</span>
	</div>
	<div id="horizontal_slide">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	</div>
</body>

Partie Js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
window.addEvent('domready', function() {
	var status = {'true': 'open','false': 'close'};	
 
	var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});
	$('h_toggle').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.toggle();
	});
	myHorizontalSlide.addEvent('complete', function() {
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});	
});

En vous remerciant d'avance

**Bovino** · 11/11/2008, 01h04

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="horizontal_slide">

Le problème est que tu as plusieurs id="horizontal-slide" sur ta page, or un id est sensé être unique dans une page. Passe plutôt par une classe avec un appel each.

**Woote** · 11/11/2008, 15h34

D'accord pour le faite que j'ai deux id pareil, j'aurais du y faire attention !

Par contre pour le coup du each j'ai vraiment du mal a voir comment faire...

Pourrez tu me donner un exemple ou un lien ou je pourrai me renseigner s'il te plait ?
J'ai un peu regardé de partout mais j'ai pas trouvé grand grand chose comme site de référence en java script pour l'instant

**Bovino** · 11/11/2008, 16h36

La doc ici.
Le principe, tu affectes une classe aux éléments que tu veux utiliser, tu les récupère avec mootools et tu appliques ta fonction en bouclant avec la méthode each()

**ghis33** · 26/05/2009, 10h02

bonjour,
je réouvre le topic j'ai le même problème que toi...
et je ne trouve pas la solution même avec la doc. je débute en javascript et je n'ai pas encore tout saisi, a tu trouvé la solution?
voilà mon code :
JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script type="text/javascript">
window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	//-vertical
	var myVerticalSlide = new Fx.Slide('vertical_slide');
	$('slide').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
	});
	// When Vertical Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myVerticalSlide.addEvent('complete', function() {
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});
});
</script>

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
	<div class="marginbottom">
		<a id="v_slideout" href="#">slide out</a>
		|
		<a id="v_slidein" href="#">slide in</a>
		|
		<a id="slide" href="#">toggle</a>
		|
		<a id="v_hide" href="#">hide</a>
		|
		<a id="v_show" href="#">show</a>
		| <strong>status</strong>: <span id="vertical_status">open</span>
	</div>
	<div id="vertical_slide">
		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 class="marginbottom">
		<a id="v_slideout" href="#">slide out</a>
		|
		<a id="v_slidein" href="#">slide in</a>
		|
		<a id="slide" href="#">toggle</a>
		|
		<a id="v_hide" href="#">hide</a>
		|
		<a id="v_show" href="#">show</a>
		| <strong>status</strong>: <span id="vertical_status">open</span>
	</div>
	<div id="vertical_slide">
		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>

j'ai compris qu'il ne fallait pas plusieurs id dans la page...mais comment faire si je veux afficher le fx.slide dans une boucle(donc plusieurs fois...)

Utilisation Fx.Slide Mootools [MooTools]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager