Ajouter du javascript

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

  • [RÉGLÉ] Ajouter du javascript

    Bonjour à tous, je suis actuellement entrain de travailler sur une page de présentation pour un site sous joomla 3, j'ai un petit menu dynamique à realiser. Je l'ai créé deja a la main dans une page html et c'est fonctionnel.
    Mon probleme c'est que j'aimerais l'ajouté à mon index.php, j'arrive à l'afficher mais le javascript ne se lance pas et je ne comprend vraiment pas pourquoi...
    Mon menu devrait ressembler à ça : http://tympanus.net/Tutorials/BubbleNavigation/
    J'ai 3 fichiers js à joindre, j'ai pourtant suivi tous les tutos sur le net mais rien ne semble fonctionner, si jamais quelqu'un a une petite idée je suis preneur, Merci
    Dernière édition par ben08140 à 24/03/2015, 14h43

  • #2
    Re : Ajouter du javascript

    un petit up

    Commentaire


    • #3
      Re : Ajouter du javascript

      Bonjour,

      Voir JDocument::addScript https://docs.joomla.org/JDocument/addScript dans la documentation Joomla!
      Pas de demande de support par MP.
      S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

      Commentaire


      • #4
        Re : Ajouter du javascript

        Salut,
        Tu peux peut-être utiliser cette technique très joomla-compatible et la plus à jour pour insérer des fichiers js et css :
        1- dans le dossier "media" du site,
        crée un dossier du nom du template ou autre
        dans ce dossier "montemplate", crée 3 dossiers nommés respectivement "css", "images", "js" (sans les ")
        2- dans le fichier index.php du template, juste au dessus du doctype, par exemple,
        insère :
        <?php
        JHtml::_('stylesheet', 'montemplate/macss.css', false, true);
        JHtml::_('script', 'montemplate/majs.js', false, true);

        ?>
        Les fichiers macss.css et majs.js auront été placés dans leurs dossiers respectifs.
        Et, si besoin, les images dans leur dossier, en corrigeant le path dans les css

        NB : ne pas inclure ni css ni js dans le path
        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

        Commentaire


        • #5
          Re : Ajouter du javascript

          Merci pour votre aide ça fonctionne mais partiellement, maintenant le probleme c'est que dans mon code javascript je dois remplacer les "$" par "jQuery" du coup j'ai une partie de mon code qui ne fonctionne pas :

          Code:
          jQuery(this).find('img').stop().animate({
          				 'width'     :'199px',
                                 		 'height'    :'199px',
                                		  'top'       :'-25px',
                                		  'left'      :'-25px',
                                		  'opacity'   :'1.0'
                              },500,'easeOutBack',function(){
                                  jQuery(this).parent().find('ul').fadeIn(700);
                              });
          Pourtant j'ai testé que je rentrais bien dedans, mais rien ne se passe dans ce qui est là alors qu'avant ça fonctionnait..

          Commentaire


          • #6
            Re : Ajouter du javascript

            Encapsule ton JS :
            jQuery(function($){
            $(document).ready(function() {
            // code ici


            });

            });
            Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

            Commentaire


            • #7
              Re : Ajouter du javascript

              Je me retrouve avec ça :
              Code:
              jQuery(function($) {
                              jQuery('#navz > div').hover(
                              $(document).ready(function () {
                                  if(jQuery(this).find('img')){alert('test ok');
               			jQuery(this).find('img').stop().animate({
              				 'width'     :'199px',
                                     		 'height'    :'199px',
                                    		  'top'       :'-25px',
                                    		  'left'      :'-25px',
                                    		  'opacity'   :'1.0'
                                  },500,'easeOutBack',function(){
                                      jQuery(this).parent().find('ul').fadeIn(700);
                                  });
              
                                  jQuery(this).find('a:first,h2').addClass('active');
              			}
              		});
              J'arrive à trouver mon image quand je suis en hover (bien qu'ici avec l'encapsulation ça se lance au démarrage) l'alert passe mais le changement dans le style ne fonctionne pas :/

              Commentaire


              • #8
                Re : Ajouter du javascript

                jQuery(function($) {
                jQuery('#navz > div').hover(
                $(document).ready(function () {
                if(jQuery(this).find('img')){alert('test ok');
                jQuery(this).find('img').stop().animate({
                'width' :'199px',
                'height' :'199px',
                'top' :'-25px',
                'left' :'-25px',
                'opacity' :'1.0'
                },500,'easeOutBack',function(){
                jQuery(this).parent().find('ul').fadeIn(700);
                });

                jQuery(this).find('a:first,h2').addClass('active') ;
                }
                });
                Pas glop du tout.
                jQuery(function($) {
                //encapsule le script dans une fonction
                });
                jQuery(function($) {
                $(document).ready(function () {

                // démarre le script qd le DOM est prêt.


                });

                });
                De plus, ton code, tel que tu le présentes ici, n'a pas l'air pas tout à fait correct, des pb de {} et ) mal placés.
                Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                Commentaire


                • #9
                  Re : Ajouter du javascript

                  Code:
                  jQuery(function($) {
                  	$(document).ready(function () {
                                  jQuery('#navz > div').hover(
                  					jQuery(this).find('img').stop().animate({
                  						'width'     :'199px',
                                         	'height'    :'199px',
                                        	'top'       :'-25px',
                                        	'left'      :'-25px',
                                        	'opacity'   :'1.0'
                                      },
                  					500,'easeOutBack',function(){
                                          jQuery(this).parent().find('ul').fadeIn(700);
                                      })
                  					jQuery(this).find('a:first,h2').addClass('active');
                  				 )};
                  				 
                  			
                  		)});
                  Je me retrouve avec un Unexpected identifier comme erreur et je ne vois pas du tout de ou.

                  Si tu veux comprendre plus simplement l'erreur j'envoi le lien directe vers la page du site : http://srvjoomlabda/joomla-v3-bda/

                  Commentaire


                  • #10
                    Re : Ajouter du javascript

                    Mauvaise URL.
                    Pas de serveur @srvjoomlabda.
                    Je vais regarde le code de l'exemple de Codrops, leurs scripts sont supers, pas toujours faciles à implémenter dans joomla.
                    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                    Commentaire


                    • #11
                      Re : Ajouter du javascript

                      Bonjour,
                      si tu suis ce que te dis Ghazal, il te faut écrire:
                      Code:
                      jQuery(function($) {
                      $(document).ready(function () {
                      
                      // ton code avec des $ et non des jquery
                      // exemple: 
                      // $('#navz > div').hover(
                      //    $(this).find('img').stop().animate(
                      //...
                      
                      });
                      });
                      Si ça ne fontionne toujours pas, contrôle que tu n'aie pas chargé plusieurs foi jquery...
                      Si ton code n'a pas de $(document).ready(function () {, enlève le, sans oublier d'effacer les balises fermantes: });
                      bon courage.

                      PS: Dans le code de ton dernier message, tu as une ) en trop, tu as: )}); ce qui est faux il faut });
                      Dernière édition par al1pb à 24/03/2015, 10h42
                      Un peu de pub: http://www.aplomb.ch

                      Commentaire


                      • #12
                        Re : Ajouter du javascript

                        Si je reprends le code dans l'exemple codrops et que je le replace dans la head, :
                        Code HTML:
                         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
                                <script type="text/javascript" src="jquery.easing.1.3.js"></script>
                                 
                                      <script type="text/javascript">
                                   jQuery(function($){
                        		$(document).ready(function() {
                        		 $(function() {
                                        $('#nav > div').hover(
                                        function () {
                                            var $this = $(this);
                                            $this.find('img').stop().animate({
                                                'width'     :'199px',
                                                'height'    :'199px',
                                                'top'       :'-25px',
                                                'left'      :'-25px',
                                                'opacity'   :'1.0'
                                            },500,'easeOutBack',function(){
                                                $(this).parent().find('ul').fadeIn(700);
                                            });
                        
                                            $this.find('a:first,h2').addClass('active');
                                        },
                                        function () {
                                            var $this = $(this);
                                            $this.find('ul').fadeOut(500);
                                            $this.find('img').stop().animate({
                                                'width'     :'52px',
                                                'height'    :'52px',
                                                'top'       :'0px',
                                                'left'      :'0px',
                                                'opacity'   :'0.1'
                                            },5000,'easeOutBack');
                        
                                            $this.find('a:first,h2').removeClass('active');
                                        }
                                    );
                                    });			
                        			});
                        		});
                        		
                                </script>
                         
                            </head>
                        Ca fonctionne hors joomla.
                        Maintenant, l'une des précautions à prendre avant d'intégrer un script dans joomla est de faire attention aux noms des sélecteurs :
                        je ne garderais pas #nav, ni #content, par exemple, trop courants.
                        Donc modifier dans l'HTML, le JS et les CSS

                        N'oublie pas non plus
                        jquery.easing.1.3.js
                        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                        Commentaire


                        • #13
                          Re : Ajouter du javascript

                          J'ai repris le code que tu m'a donné, ajouté le jquery.easing.1.3 (en revanche pas besoin du jquery.min car déja integré dans l'index de mon template). Mais franchement je comprend pas, même résultat qu'au début, tout ce qui est width height ne se modifie pas... pourtant le find('img') passe, hors joomla pour moi ça fonctionne également mais une fois inclue dans joomla ça bloque à ce niveau, gros casse-tête

                          et pour ce qui est des sélécteurs j'avais effectivement ajouté un "z" a chaque fois pour etre sur.

                          Commentaire


                          • #14
                            Re : Ajouter du javascript

                            Et tu as quoi comme erreur dans Firebug ?

                            Quel template ?

                            Tu appliques le script codrops sur ton propre html ? Ou sur le mod_menu de joomla ?
                            Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                            Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                            Commentaire


                            • #15
                              Re : Ajouter du javascript

                              J'utilise la console de chrome, ça ne m'affiche plus d'erreur là mais ma bulle bleu ne s'agrandit pas MAIS mes sous menus s'affichent.
                              J'utilise le template as002059, le code je le met directement dans mon index.php du template

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X