Fx.Slide() toggle(). qui ne marche qu'en fermeture

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Fx.Slide() toggle(). qui ne marche qu'en fermeture

    Salut all,

    Je suis en train de créer un petit composant et j'aimerai y ajouter un effet Mootools, l'effet Fx.Slide().

    Quand je rajoute ce qu'il faut, si ma DIV est ouverte cela se ferme (que j'utilise toggle() ou bien slideOut()).
    Par contre mon souhait est d'avoir ma DIV initialement fermée, je rajoute donc un .hide() à mon élément. Ensuite quand je clique sur mon bouton pour l'afficher rien ne se passe et je n'ai aucune erreur JavaScript renvoyée
    Avec le toggle() cela se ferme mais ne se réouvre pas ensuite quand on reclique.

    J'ai Joomla 1.5.12 d'installé, voici mon code :

    Code PHP:
    $document =& JFactory::getDocument();
    $document->addScriptDeclaration("
                            var myVerticalSlide;
                            window.onload = function() {
                                    myVerticalSlide = new Fx.Slide('vertical_slide');
                                   myVerticalSlide.hide();
                            }       
                    "
    ); 
    myVerticalSlide.hide(); ferme initialement ma DIV

    Ensuite je créer mon élément HTML à afficher, et le bouton qui permet de l'afficher :

    Code PHP:
    <span id="v_slidein" style="cursor:pointer;" onclick="myVerticalSlide.toggle('vertical');">Recherche avancée</span>
    <div id="vertical_slide">
      <fieldset class="phrase">
      <legend><?php echo JText::_('Search Parameters'?></legend>
        <?php echo $this->lists['searchmarques']; ?>
        <?php echo $this->lists['searchaxes']; ?>
        <?php echo $this->lists['searchlignes']; ?>
      <br /><br />
      <label for="ordering" class="ordering"><?php echo JText::_('Ordering'?>:</label>
      <?php echo $this->lists['ordering']; ?>
      </fieldset>
    </div>
    Je ne comprends vraiment pas, d'autant que je n'ai aucune erreur JS renvoyée... Cette DIV peut se fermer mais pas s'ouvrir !
    Dernière édition par SnoT à 20/07/2009, 11h07

  • #2
    Salut,
    peut-être parce que ton code n'est pas très mootool-esque.
    Avec Mootools, window.addEvent est préférable à window.onload
    Je te propose un slide très classique, que tu peux adapter :
    Code:
    window.addEvent('domready',function() { 
    var mySlide = new Fx.Slide('content'); 
    mySlide.hide();
    
    $('toggle').addEvent('click', function(e){
    	e = new Event(e);
    	mySlide.toggle();
    	e.stop();
    });
    	});
    Code HTML:
    <p id="toggle" style="cursor:pointer;">toggle</p>
    <div id="content">
    Content to slide.
    </div>
    et tu vires bien sur :
    onclick="myVerticalSlide.toggle('vertical');"
    Remplacé par
    $('toggle').addEvent('click', ....

    Attention : si tu veux des classes, au lieu des ID, il faudra des modifications.
    Hope it helps.
    Dernière édition par ghazal à 17/07/2009, 21h27
    “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

    Commentaire


    • #3
      Salut, merci pour ton aide, j'avais déjà testé ce code en me basant donc sur le code donné par MOOTOOLS sur son site. Le résultat est le même, la div peut se fermer mais pas s'ouvrir

      Le code que j'ai utilisé ensuite était basé sur ce tuto http://docs.joomla.org/Tutorial:Addi..._component_WIP

      Je ne comprends vraiment pas le problème ! Help plz

      Commentaire


      • #4
        ça marche très bien. Ci-joint le fichier démo avec tes éléments revus et corrigés à la sauce mootools par Ghazal
        Fichiers joints
        Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
        http://www.template-creator.com Outil de création de templates
        Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

        Commentaire


        • #5
          Salut,
          qd la mootools' team s'y met ... LOL
          Le tuto cité par Snot devrait être corrigé ou supprimé. Il s'appuie sur sur Moo.FX, l'antique version de Mootools.
          D'où le window.onload.

          Une technique, parmi d'autres, pour ajouter du JS dans un composant :

          - soit dans le controller.php, pour tout le comp :
          Code PHP:
          defined'_JEXEC' ) or die( 'Restricted access' ); 
          jimport'joomla.application.component.controller' ); 
           
          $doc =& JFactory::getDocument();

          $doc->addStyleSheet(JURI::base().'components/com_moncomp/css/style.css');
          $doc->addScript(JURI::base().'components/com_moncomp/js/file.js'); 
          - soit dans le default.php de la view/xxx/tmpl/default.php auquel on veut que le JS s'applique
          Code PHP:
          defined'_JEXEC' ) or die( 'Restricted access' ); 
           
          $doc =& JFactory::getDocument();

          $doc->addStyleSheet(JURI::base().'components/com_moncomp/css/style.css');
          $doc->addScript(JURI::base().'components/com_moncomp/js/file.js'); 
          Voire même dans une variable, placée dans le cas cité, dans le view.html.php:
          (code piqué dans le comp jforms, excellent, où le dev a trouvé une soluce pour utiliser Moo1.2 dans l"admin du comp)
          Code PHP:
          $newScriptArray[JURI::root().'administrator/components/com_jforms/JS/mootools.1_20.js'] = 'text/javascript' 
          Hop it helps.
          “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

          Commentaire


          • #6
            Envoyé par ghazal Voir le message
            Salut,
            qd la mootools' team s'y met ... LOL
            Le tuto cité par Snot devrait être corrigé ou supprimé. Il s'appuie sur sur Moo.FX, l'antique version de Mootools.
            D'où le window.onload.
            LOL ben ouais on retrouve toujours les mêmes ! espéront que SNOT va pouvoir s'en sortir avec tout ça. Je pense que ça devrait le faire...
            Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
            http://www.template-creator.com Outil de création de templates
            Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

            Commentaire


            • #7
              Salut et merci pour ces réponses, mais mon problème n'est pas le chargement des fichiers JS dans la page, mais plutôt l'éxecution du DOM sur ma page.

              Comme je l'ai dit ma DIV peut se fermer mais pas s'ouvrir (c'est donc que le Mootools est bien chargé, mais quelque chose l'empêche d'ouvrir ma DIV).

              Pour charger Mootools dans ma page j'utilise:
              Code PHP:
              JHTML::_'behavior.mootools' ); 
              Je comprends pas

              Commentaire


              • #8
                Un autre truc aussi, si je me fie mot pour mot au code donnée par Mootools sur son site pour l'utilisation de Fx.Slide() j'obtient cette erreur :

                Erreur*: this.stopPropagation() is undefined
                Fichier Source*: http://localhost/conseillere-de-beau...js/mootools.js
                Ligne*: 47

                Sur Google je ne trouve rien là dessus

                Commentaire


                • #9
                  Du nouveau, ça marche sur IE 7 et 8 mais pas sur Firefox ! SUr Firefox ca se ferme mais ne s'ouvre pas, sur IE aucun problème !

                  Une idée ?

                  Commentaire


                  • #10
                    Bon ca y'est j'ai trouvé ! Un bug bizarre mais bon un bug quand même, certainement la nouvelle version de FireFox qui fait des siennes. En fait dans ma div se trouvait un <filedset>, en le supprimant cela fonctionne maintenant, je n'ai plus qu'à retravailler ma mise en page xD

                    Ce qui m'a mis la puce à l'oreille c'est que sur IE quand j'ouvrais ma DIV, la bordure du bas de mon fieldset n'apparaissait pas.

                    Voilou je ne vous dérange pas plus longtemps et vous remercie pour votre aide.

                    Commentaire


                    • #11
                      Tant mieux si tout fonctionne !
                      “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                      Commentaire


                      • #12
                        Exactement le même problème...

                        J'ai utilisé le code de ghazal, ça me le ferme mais ne le ré-ouvre plus.
                        Malheureusement pour moi, je n'ai pas de fieldset à supprimer pour que ça marche. J'essaie de slider une liste (qui est en faite mon menu) et ca ne marche plus du tout.
                        Par contre avec un div et du texte dedans, ca marche très bien (fermeture et ouverture), je comprend pas...

                        J'ai poussé plus loin les tests, apparemment ce serait parce que ma liste possede une classe css que ça ne marche plus. Je peux pas l'enlever, j'en ai besoin pour formatter mon menu.

                        Je suis vraiment perdu, si quelqu'un a une idée merci de m'éclairer de son savoir.

                        Cordialement,
                        Peter

                        Commentaire


                        • #13
                          peut etre qu'avec un exemple en ligne ou sinon quelques lignes de code on pourrait mieux voir le souci
                          Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                          http://www.template-creator.com Outil de création de templates
                          Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                          Commentaire


                          • #14
                            Envoyé par ced1870 Voir le message
                            peut etre qu'avec un exemple en ligne ou sinon quelques lignes de code on pourrait mieux voir le souci
                            Pas faux
                            Pour l'exemple en ligne, ce serait le plus pratique mais je n'ai pas encore pris d'hébergement pour mon site, faudrait que je commence à chercher d'ailleurs.
                            Je prépare le code. (j'éditerai)

                            Merci.

                            EDiT:
                            Code PHP:
                            <div id="footer">
                                <
                            div id="footer1">
                                    <
                            jdoc:include type="modules" name="footer" style="xhtml" />
                                    <
                            div class="clearer"></div>
                                    <
                            p id="toggle" style="cursor:pointer;">toggle<span id="vertical_status"open</span></p>
                                </
                            div>
                                <
                            div id="footerMenu1">  /* TEST : Ca marche très bien la */
                                            
                            <pa slider </p><pa slider </p><pa slider </p>
                                        <
                            ul class="menuMenuFooter">
                                            <
                            li>test li</li>
                                    </
                            ul>
                                <
                            div id="footerMenu">  
                            /* La ca marche plus... La faute au code généré par joomla! contenant des classes css (lorsque je passe ces classes au TEST du dessus, ca ne marche plus aussi */
                                    
                            <jdoc:include type="modules" name="user4" style="xhtml" />
                                </
                            div>
                            </
                            div
                            Code:
                            window.addEvent('domready',function() { 
                            
                            	var status = {
                            		'true': 'open',
                            		'false': 'close'
                            	};
                            
                            	var mySlide = new Fx.Slide('footerMenu1'); 
                            	//mySlide.hide();
                            
                            	$('toggle').addEvent('click', function(e){
                            		e = new Event(e);
                            		mySlide.toggle();
                            		e.stop();
                            	});
                            
                            	mySlide.addEvent('complete', function() {
                            		$('vertical_status').set('html', status[mySlide.open]);
                            	});
                            });

                            Voila, merci pour l'aide.
                            Dernière édition par PeterBlack à 07/08/2009, 09h00

                            Commentaire


                            • #15
                              Ta div footerMenu1 n'est pas fermé.
                              Mais bon je pense pas que ca soit ca xD

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X