[RÉGLÉ] Ajouter du javascript

[ben08140]

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

[ben08140]

Re : Ajouter du javascript

un petit up

[jisse03]

Re : Ajouter du javascript

Bonjour,

Voir JDocument::addScript https://docs.joomla.org/JDocument/addScript dans la documentation Joomla!

[ghazal]

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

[ben08140]

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 :

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

[ghazal]

Re : Ajouter du javascript

Encapsule ton JS :

jQuery(function($){
$(document).ready(function() {
// code ici


});

});

[ben08140]

Re : Ajouter du javascript

Je me retrouve avec ça :

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

[ghazal]

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.

[ben08140]

Re : Ajouter du javascript

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/

[ghazal]

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.

[al1pb]

Re : Ajouter du javascript

Bonjour,
si tu suis ce que te dis Ghazal, il te faut écrire:

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 });

[ghazal]

Re : Ajouter du javascript

Si je reprends le code dans l'exemple codrops et que je le replace dans la head, :

 <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

[ben08140]

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.

[ghazal]

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 ?

[ben08140]

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