Bonjour,

Pour poser la situation : j’adore les effets mootools / je connais rien js / je triture seulement des scripts déjà fait.

Bon, mon problème concerne la fonction cacher et monter un div, comme les exemples à cette page :
http://demos111.mootools.net/Fx.Slide

Je souhaiterai faire plusieurs div avec cette fonction, sur une même page, mais le script ne fait référence qu’a un seul id, du coup je ne peux mettre qu’un div.

… et si j’ai 10 bloc div je ne me vois pas mettre 10 mêmes script avec une id différente à chaque fois. Je suis certain qu’il y a un moyen tout con, mais comme js m’est pour l’instant inconnu…

Merci pour votre aide

Je connais pas Mootools très très bien, mais je suppose qu'en ciblant les éléments par leur class au lieu de leur id, ça devrait être possible ouais.

Et par exemple

var myVerticalSlide = new Fx.Slide('vertical_slide').hide();

ça c'est un élément id ? le passer en class ça donnerai quoi ?

Encore une fois, à tester parce que je connais pas la syntaxe précise de Mootools mais d'après ce que j'ai vite lu de la doc, ça pourrait donner un truc comme ça:

$$('.taClasse').each(function(el){
    new Fx.Slide(el).hide();
});

ok je vais me pencher sur la question.

Merci

Si tu t'en sors, n'oublie pas de mettre ton sujet en résolu

Mouais,

c'est mal parti quand même, rien que quand je change mon id en class dans ma feuille ça plante toute mes autres animations...

Si quelqu'un à un exemple concret que je puisse comprendre...

Bah donne-nous ton HTML et ton JS peut-être

le html, qui donne 5 liens avec une animation différentes sur un div nommé vertical_statut

<div class="marginbottom">

		<a id="v_slideout" href="#">slide out</a>
		|
		<a id="v_slidein" href="#">slide in</a>
		|
		<a id="v_toggle" 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>

Le js que j'implémente sur chaque page, en plus de "mootools" version 1.2

Il fait fonctionner uniquement id="vertical_slide", je souhaiterai qu'il fasse fonctionner tout les liens(div class="vertical_slide):

window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'//ça c'est pas important, c'est juste une indication ouvert ou fermé
	};
	
	//-vertical

	var myVerticalSlide = new Fx.Slide('vertical_slide');

	$('v_slidein').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
	});

	$('v_slideout').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideOut();
	});

	$('v_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
	});

	$('v_hide').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.hide();
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});
	
	$('v_show').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.show();
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});
	
	// 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]);
	});


	//--horizontal
	var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});

	$('h_slidein').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.slideIn();
	});

	$('h_slideout').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.slideOut();
	});

	$('h_toggle').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.toggle();
	});

	$('h_hide').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.hide();
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
	
	$('h_show').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.show();
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
	
	// When Horizontal Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myHorizontalSlide.addEvent('complete', function() {
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
});

Tu voudrais que quand on clique sur un lien, tous les div avec la class vertical_slide bougent avec le même effet ?

Purée, je sais pas si vous expliquez pas clairement ou si c'est à force d'entendre les danois parler à longueur de journée, mais des fois je rame vraiment pour comprendre ce que vous voulez faire

C’est parce que je maîtrise mal les concepts et le vocable js.

Je veux plusieurs div animé et indépendant les uns des autres.

Soit :
Un lien = un div animé

… et pas
Un lien = plusieurs div animés

Aaaaah, tu veux dire pour chaque lien, un div correspondant avec l'effet demandé ?

Comme ici : http://wiki.github.com/madrobby/script [...] effect-toggle

c'est très précisement cela.

Sauf que le probleme reste le même ; si je copie un ensemble lien+div correspondant

Seul le premier réagi ; donc il fonctionne sur id unique

Moi je cherche un truc qui fonctionne independamment les uns les autres.

Je vais te faire les bouts d'exemple avec seulement deux div, mais il suffit que tu crées des div avec des id différentes et c'est bon

$('v_slidein').addEvent('click', function(e){
    e.stop();
    Fx.Slide('vertical_slide_1').slideIn();
});

$('v_slideout').addEvent('click', function(e){
    e.stop();
    Fx.Slide('vertical_slide_2').slideOut();
});

Et ton HTML:

<div id="vertical_slide_1">
    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 id="vertical_slide_2">
    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>

Si j'ai bien compris ce que tu veux, ça devrait le faire

En fait, la ligne qui lie ta div à ton effet c'est ça :

var effect = new Fx.Slide('vertical_slide_1');

Suffit de changer l'id passée en paramètre et ça roule.

Si je comprends ça revient à recopier le js pour chaque div ?

Ca revient à la même chose que le code que t'as mis un peu plus haut, sauf que tu changes juste l'objet qui appelle l'effet

Comme ça ?

<div id="vertical_slide_0">
    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 id="vertical_slide_1">
    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>

<button type="button" class="taclass">Slide du div 0</button>
<button type="button" class="taclass">Slide du div 1</button>

<script type="text/javascript">
window.addEvent('domready', function() {
  $$('.taclass').each(function(el,index) {
    el.addEvent('click', function(e){
      e.stop();
      var effect = new Fx.Slide('vertical_slide_'+index);
      effect.toggle();
    });
  });
});
</script>

Non si j'ai bien compris, il veut un effet différent par div.

Ah bah alors forcément, si les effets sont différents, il faut de toutes façons préciser l'effet, donc c'est normal qu'il faille plus de lignes... ?

Ah mais moi je suis tout à fait d'accord hein

Salut,

Lol Yoveo vraiment je dois mal m'exprimer, pas différent effet... Golmote c'est ce que je recherche je vais tester ta proposition.

Je met le post en résolu si je n'y arrive pas je reviendrai.

Merci pour votre aide

Ah bah en gros, ça revient à utiliser le code que j'ai mis en 4ème post, avec la gestion du click en plus quoi

Oui, je m'en suis largement inspiré

Hum, c'est vraiment chiant de pas comprendre la langue...

Bon j'ai trouvé une ressource qui répond exactement au besoin :
http://www.consideropen.com/demos/toggle-o-matic/

Avis au JsNoob comme moi...

... Tu trouves ça plus simple ?

Enfin... tant que ça résout ton problème...

EDIT : J'avais mal compris le fonctionnement du truc.
Oui, c'est sûr, c'est plus simple... mais bon c'est vraiment utiliser du JS sans rien comprendre de ce qu'il se passe...

Oui alors là...choix discutable, surtout que le code de Golmote doit logiquement fonctionner

mmmmm,

C'est pas faux, je suis pas sûr de pourvoir ré écrire ce genre de code.

Ceci dit du moment que ça marche sans concession et que c'est assez léger...

Merci en tout cas du suivi

Bah, si tu veux, dernier coup de main, je te commente le code de Golmote et tu vas voir que c'est pas du tout compliqué. Et puis t'as la doc de mootools pour t'aider aussi, indispensable

<script type="text/javascript">
// donc ça, c'est juste ce qui remplace le standard window.onload
// ça veut juste dire qu'on exécutera le code de la fonction quand la page sera chargée
window.addEvent('domready', function() { 

  // cette ligne permet de récupérer tous les éléments HTML qui ont la classe 'taclass'
  // la fonction $$ permet d'utiliser les sélecteurs de CSS pour ça
  // et cette fonction retourne un tableau (pour simplifier) 
  // ensuite, la fonction each permet juste d'appliquer un traitement à chaque élément contenu dans ton tableau
  // je te laisse regarder la doc de mootools les paramètres de la fonction each
  // mais basiquement, el va représenter l'élément du tableau qu'on est en train de voir et index sa place dans le tableau
  $$('.taclass').each(function(el,index) {
 
    // donc le code exécuté dans cette fonction va l'être pour tous les éléments du tableau contenant tous les éléments HTML de ta page qui ont la class taclass
    // faut aussi bien comprendre que le code que tu mets ici est bien propre à chaque élément. Ca veut dire que chaque élément va "subir" le code ici indépendemment des autres éléments.


    // on va donc écouter les clics sur chacun d'eux
    el.addEvent('click', function(e){

      // donc ici c'est le code qui va s'exécuter quand on clique sur un élément

      // première chose qu'on fait, on arrête le clic
      // ca veut dire par exemple que si ton élément est un lien vers une autre page, et bien on aura pas de changement de page, parce qu'on bloque le clic
      e.stop();

      // donc là on crée un nouvel objet Fx.Slide en pointant sur le div que tu veux relier à l'élément sur lequel tu cliques
      // donc pour rendre ça dynamique, on utilise l'index de l'élement dans le tableau
      var effect = new Fx.Slide('vertical_slide_'+index);

      // et le toggle final, on affiche / cache le div
      effect.toggle();
    });
  });
});
</script>

Donc tu vois, finalement c'est pas si compliqué que ça

Merci c'est sympa de prendre du temps.

Disons que c'est lisible, mais depuis un an je bidouille le html, puis le php, puis le php pour les base de données, maintenant le js, ça fait un peu bcp pour mes petits neurones...