Souci avec Fx.Slide de MooTools

**Lyan53** · 20/08/2010, 00h20

Bonjour à tous,

Depuis plusieurs jours , je tente désespérément de me créer un petit menu avec l'effet de style FxSlide de mootools .

D'après ce que j'ai pu voir , ça n'est pas si simple que ça car il faut forcément passer par le javascript et pour tout dire , c'est un peu du chinois pour moi et ce n'est pas faute d'essayer de comprendre (m'enfin ça s'apprend c'est comme tout) :p

J'ai donc dans un premier temps tenté de faire mon petit menu en utilisant l'exemple directement fournit sur le site de demos mootools : http://demos.mootools.net/Fx.Slide

Pour mon 1er menu pas de souci ça a fonctionné mais dès que j'ai tenté d'en ajouter un second , là ça a été le drame , ça ne passait pas (d'après ce que j'ai compris via mes recherches sur le net , c'est principalement parce qu'ils utilisent des ID dans le code et une ID étant unique , on ne peut donc pas en utiliser plusieurs sur une même page)

Bref passons , j'ai donc continuer mes recherches et je suis tombé sur un forum ou un gars propose une solution pour justement contourner ce souci : http://www.webdeveloper.com/forum/sh...d.php?t=159079

Il a même directement mis un site de démonstration de son code ici : http://www.congoblue.com.au/examples...leSliders.html

J'ai donc utilisé ce dernier pour créer mon petit menu mais , bien que celui-ci fonctionne partiellement , je rencontre néanmoins un petit souci lorsque je tente d'imbriquer le code (à vrai dire c'est ce que je cherche à faire depuis le début , une sorte de menu en accordéon)

Lorsque je disais que le code fonctionne partiellement c'est simplement parce que lorsque j'ouvre ma première catégorie , ça fonctionne bien , mais si je colle dedans une sous catégorie , quand je l'ouvre , la taille de la fenêtre de la première catégorie ne s'adapte pas ...
Je suis donc obligé de laisser ouvert la sous catégorie , de refermer et réouvrir la première pour que cette fois ci elle s'adapte à la bonne taille .

Bref le mieux à faire ce des fournir le code que j'utilise

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="mootools-v.1.2.0.js"></script>
 
<script type="text/javascript">
window.addEvent( 'domready', function(){
 $$( '.moreInfoWrapper' ).each(function(item){
  var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { duration: 500 } );
  thisSlider.hide();
  item.getElement( '.divToggle' ).addEvent( 'click', function(){ thisSlider.toggle(); } );
 } );
} );	
</script>
 
<style type="text/css">
.divToggle
{
	color: #ffffff;
	background-color:#0033cc;
	padding: 4px;
}
.moreInfoWrapper
{
	width: 128px;
	border: 2px solid #dddddd;
	background-color: #ffffff;
	padding: 0px;
}
.moreInfo
{
	padding: 2px;
}
</style>
 
</head>
 
 
 
<body>
<div class='moreInfoWrapper'>
		<div class='divToggle'>Catégorie 1</div>
		<div class='moreInfo'>Contenu 1
		        <div class='moreInfoWrapper'>
		                <div class='divToggle'>Sous catégorie</div>
		                <div class='moreInfo'>Sous contenu</div>
                        </div>
		</div>
</div>
 
<div class='moreInfoWrapper'>
		<div class='divToggle'>Catégorie 2</div>
		<div class='moreInfo'>Contenu 2</div>
</div>
 
</body>
</html>

Je fournis ici le lien de mon essai avec la librairie mootools incluse dans l'archive si besoin :[ame="http://www.zshare.net/download/7944926664039202/"]zSHARE - Fx.Slide - TEST Menu accordeon.zip[/ame]

Je suis assez embêté car à priori , il ne manque pas grand chose au niveau du javascript (bien que je puisse me tromper) pour que le menu que j'aimerais mettre en place puisse fonctionner mais je suis un quiche dans ce langage et je ne sais vraiment pas comment réussir à faire en sorte que la fenêtre de la catégorie parent s'adapte en fonction de l'ouverture/fermeture de la sous catégorie (qui ne semble pas être reconnue en direct mais seulement une fois que celle ci est déjà ouverte)

J'en fais donc appel aux connaisseurs du langage javascript dans l'éventualité d'obtenir une aide plus qu'appréciée

Merci de m'avoir lu , c'est déjà pas mal

**vermine** · 20/08/2010, 10h46

Bonjour à vous,

Merci pour ces explications complètes et bien exprimées. Ca change de certains posts un peu plus... concis et incompréhensibles.

Tout d'abord, j'aimerais préciser que nous sommes maintenant en Mootools 1.2.4. Mais allez savoir pourquoi, le fonctionnement des Fx.Slide à changé entre les deux versions.

Bref, on va rester en 1.2.0 puisque vous avez déjà du code. J'ai parlé de votre post avec Bovino car je me demandais si c'était vraiment Mootools qui posait problème ou bien si ça pouvait être résolu en HTML. Hé bien, apparemment, Mootools modifie la taille du container uniquement selon l'apparition de ses premiers fils. Or ici, ce sont les petits-fils qui apparaissent. Donc on vous propose de modifier la taille du container principal selon la taille du container fils:

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
window.addEvent( 'domready', function(){
    $$( '.moreInfoWrapper' ).each(function(item){
     var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { duration: 500 } );
     thisSlider.hide();
 
     item.getElement( '.divToggle' ).addEvent( 'click', function(){ 
         thisSlider.toggle();
         item.getParent().getParent().style.height = item.getParent().style.height;
         } );
    } );
} );

**vermine** · 20/08/2010, 12h51

Re!

J'ai fait quelques tests et recherches pour obtenir le même résultat en version 1.2.4 que vous pouvez télécharger ici (peu importe la méthode de compression).

Et bien bonne nouvelle, le bug est corrigé.

En fait, vous devez rajouter un pluggin. Pour ça, vous allez ici, sur la page des more et vous cochez les cases: More, Lang, Fx.Slide et Slider. Les deux dernières suffisent sans doute mais bon, je n'ai pas passé mon temps à tester toutes les addons.

Vous téléchargez ce nouveau script et vous l'ajoutez à votre page (je vous l'ai mis en pièce jointe au cas où):

Code html :

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

1
2
3
4
5
6
7
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Bibliothèque de base -->
<script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script>
<!-- Pluggin -->
<script type="text/javascript" src="mootools-1.2.4.4-more.js"></script>

Et le tour est joué. Pas besoin de manipuler la taille du container père.

**Lyan53** · 21/08/2010, 10h02

Bonjour à tous ,

Effectivement avec les dernières versions (more et core) de mootools , la sous catégorie se redimensionne d'elle même , il fallait le savoir

Sinon le morceau de script modifié avec manipulation de la catégorie parent fonctionne également , 2 solutions pour le prix d'une seule c'est parfait

Pour information , j'ai également continué mes recherches de mon côté et j'ai trouvé ce script qui posait exactement le même souci que celui-ci dessus (au niveau des catégories parent)

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
<script type="text/javascript" src="mootools-v.1.2.0.js"></script>
 
<script type="text/javascript">
window.addEvent( 'domready', function(){
var min = $(document.body).getElements('a.widget_minimize');
 
// store an instance into each content div and set initial state to hidden.
$$("div.widget_box_content_cont").each(function(el) {
    el.store("fxslide", new Fx.Slide(el).hide());
});
 
min.addEvent('click', function(event) {
    event.stop();
    this.getParent().getElement(".widget_box_content_cont").retrieve("fxslide").toggle();
});
} );	
</script>

Dans les aléas du net j'étais tombé sur ce morceau de script qui est justement prévu pour corriger le tir sur le redimensionnement des sous catégories :

Code :

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

1
2
3
4
5
6
7
8
var formSlide = new Fx.Slide('FormSlider', {
        onComplete: function(){
            if(this.wrapper.getStyle('height') != "0px"){
                // Check if the slider is open
                this.wrapper.setStyle('height', 'auto');
           }
        }
    }).hide();

J'avais donc par je ne sais quel miracle réussi à concilier les deux de cette manière (sans savoir réellement si le code est propre ou non finalement)

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
window.addEvent( 'domready', function(){
var min = $(document.body).getElements('a.BBCodeShowHide');
 
// store an instance into each content div and set initial state to hidden.
$$("div.BBCodeShowHide_Content").each(function(el) {
    el.store("fxslide", new Fx.Slide(el, {
        onComplete: function(){
            if(this.wrapper.getStyle('height') != "0px"){
                // Check if the slider is open
                this.wrapper.setStyle('height', 'auto');
           }
        }
    }).hide());
});
 
min.addEvent('click', function(event) {
    event.stop();
    this.getParent().getElement(".BBCodeShowHide_Content").retrieve("fxslide").toggle();
});
} );

Mais ça à tout de même eu le résultat escompté vu que ça fonctionne (à priori) correctement

Pour le HTML qui va avec ce second script au cas ou il intéresserait des personnes qui passeraient dans le coin :

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
<div class="widget_box">
    <div class="widget_box_content">
        <a href="#" class="widget_minimize">link</a>
        <div class="widget_box_content_cont">
            <div class="widget_box">
    <div class="widget_box_content">
        <a href="#" class="widget_minimize">link</a>
        <div class="widget_box_content_cont">
            some content
        </div>
    </div>
    <div class="widget_box_content">
        <a href="#" class="widget_minimize">link 2</a>
        <div class="widget_box_content_cont">
            some content 2
        </div>
    </div>    
</div>
        </div>
    </div>
    <div class="widget_box_content">
        <a href="#" class="widget_minimize">link 2</a>
        <div class="widget_box_content_cont">
            some content 2
        </div>
    </div>    
</div>

Pour ma part , je préfère tout de même remplacer :

Code :

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

        <a href="#" class="widget_minimize">

par :

Code :

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

        <a href="javascript:void(0)" class="widget_minimize">

Mais c'est juste une question d'esthétisme , car avec "javascript:void(0)" à la place de "#" , si on utilise ce morceau de script en lien comme ici présent , il apparaît toujours comme lien non visité même une fois qu'on a cliqué dessus

Sinon , j'ai testé aussi le script d'origine (sans l'ajout) avec mootools 1.2.4 core et more et bien évidement y'a plus le souci de redimensionnement non plus

Bref un très grand merci à vous pour l'aide apportée et un très bon week end