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
                              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

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X