Conflit js sur wordpress 3

Bonjour,

Tout d'abord, merci pour ce forum ou l'on trouve plein de ressources et d'aides intéressantes.

Je viens de passer sur wordpress 3 depuis quelques jours... J'étais resté sur les anciennes versions pour une meilleure maitrise.

Mais pour ce site, je dois utiliser le plugin PHOTOSPACE 2 basé sur la gallerifix et donc basculer sur wp3... Et la c'est le drame !
Surtout de gros problemes de conflit JS.

Je lis beaucoup de post sur les forums, mais je me noie completement !

------

Sur le même site j'utilise :

- Fancybox
- Coda slider
- Plugin contact form 7
- photospace 2 (vers wp 3 obligatoire)

Et pour la page FAQ, un autre code JS.

Résultats en bidouillant : Mes slides ou ma page FAQ ne fonctionnent plus.

Pouvez me donner quelques conseil svp.

Voici ce que j'ai dans mon header :

<!-- MENU Bar -->
<script type="text/javascript" src="http://www.fabrispec.com/wp-content/themes/mp/js/superfish.js"></script>
<!-- SCRIPT SLIDES -->
<script type="text/javascript" src="http://www.fabrispec.com/wp-content/themes/fabrispec/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.fabrispec.com/wp-content/themes/fabrispec/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">

			$().ready(function() {
				$('#coda-slider-1').codaSlider();
			});

		 </script>

<!-- SCRIPT FAQ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("dd").hide();
	$("dt").css("cursor", "pointer");
	$("dt").click(function() {
		if($(this).next().is(":visible") == false) {
			$("dd").slideUp();
			$(this).next().slideDown();
		}
	});
});
</script>
	

<!-- SCRIPT MENU -->
<script type="text/javascript">

		// initialise plugins
		jQuery(function(){
			jQuery('ul.sf-menu').superfish();
		});

		</script>



<script type= "text/javascript">/*<![CDATA[*/
$(function(){
 //Get our elements for faster access and set overlay width
 var div = $('div.sc_menu'),
 ul = $('ul.sc_menu'),
 ulPadding = 15;

 //Get menu width
 var divWidth = div.width();

 //Remove scrollbars
 div.css({overflow: 'hidden'});

 //Find last image container
 var lastLi = ul.find('li:last-child');

 //When user move mouse over menu
 div.mousemove(function(e){
 //As images are loaded ul width increases,
 //so we recalculate it each time
 var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
 var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
 div.scrollLeft(left);
 });
});
/*]]>*/</script> 



<?php wp_head(); ?>

Merci,

Julien

Pour mieux comprendre :

Voici l'adresse du site www . fabrispec . com

Merci,

Julien

Bonjour

Commence par rendre disponible ce script qui est en 404 actuellement :
http://www.fabrispec.com/wp-content/themes/mp/js/superfish.js

Une fois ceci fait, je pense que tu devras inclure jQuery plus tôt dans la page. Ton domReady spécial codaSlider en a besoin.

Utilise une console pour débugger ce genre de chose, par exemple Firebug pour Firefox.

Merci pour ton aide.

Je viens de rectifier mon erreur de d'adresse js.

J'ai assez peu de connaissance en js.
Je n'ai pas bien compris :

a écrit :
tu devras inclure jQuery plus tôt dans la page. Ton domReady spécial codaSlider en a besoin.

Utilise une console pour débugger ce genre de chose, par exemple Firebug pour Firefox.

Dans la page FAQ je me retrouverai obligatoirement avec l'ensemble des codes JS...

Oui, j'ai firebug, mais je l'utlise principalement pour corriger plus facilement des erreurs de style.

Merci,

Julien

julesinmlt a écrit :
Oui, j'ai firebug, mais je l'utlise principalement pour corriger plus facilement des erreurs de style.

L'onglet Console de Firebug te sera très utile dans cette situation de debug.
Actuellement tu y verras une erreur venant du script superfish.js.
Il est ensuite aisé de comprendre, à la vue de ton code, que jQuery n'est pas inclu avant superfish. (ce plugin dépends de jquery-1.3.2.min.js)
Donc prochaine étape : inverser l'inclusion de ces 2 scripts.

Sinon l'onglet Réseau m'a été utile par exemple pour voir que ton script du message précédent était en 404.
http://eric-pommereau.developpez.com/tutoriels/outil-web/firebug/#LV
Modifié par Libratoi (04 Jul 2011 - 11:28)

Merci.

Mais même si je suprime le script superfish, j'ai un conflit entre coda slider et mon script de faq dynamique.

Dans mon header :

<!-- SCRIPT SLIDES -->
<script type="text/javascript" src="http://www.fabrispec.com/wp-content/themes/fabrispec/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.fabrispec.com/wp-content/themes/fabrispec/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.fabrispec.com/wp-content/themes/fabrispec/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">

			$().ready(function() {
				$('#coda-slider-1').codaSlider();
			});

		 </script>

<!-- SCRIPT FAQ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("dd").hide();
	$("dt").css("cursor", "pointer");
	$("dt").click(function() {
		if($(this).next().is(":visible") == false) {
			$("dd").slideUp();
			$(this).next().slideDown();
		}
	});
});
</script>

Un conflit c'est à dire ?
(Je ne vois pas de changement sur ton site)

Sans rentrer dans l'analyse minutieuse de tous tes scripts, et à la vue du simple code que tu viens de copier coller, je dirais que $ n'est pas défini.
J'écrirai plutôt :

<script type="text/javascript"> 
  jQuery().ready(function($) { 
    $('#coda-slider-1').codaSlider(); 
  });  
</script> 

et

jQuery(document).ready(function($) { 
    $("dd").hide(); 
    $("dt").css("cursor", "pointer"); 
    $("dt").click(function() { 
        if($(this).next().is(":visible") == false) { 
            $("dd").slideUp(); 
            $(this).next().slideDown(); 
        } 
    }); 
}); 

Non testé.

Autre chose : tu inclues 2 fois jQuery dans ton code ci-dessus.
Modifié par Libratoi (05 Jul 2011 - 10:12)

Il te faudrait apprendre les bases de javascript/jquery et l'emploi des outils de debug firebug/outils dev chrome.
L'ordre d'appel des scripts a une importance. Si tu appelles un script utilisant jqueyr avant d'appeler jquery lui me, ça ne fonctionnera aps.
Ta version de jquery est obsolète (on est à la 1.6, la tienne est une 1.3), ce qui peut causer des pb avec les scripts que tu utilises.
HS: protège le contenu de tes répertoires par htaccess, ils sont listables.

Merci pour vos réponses.
Mon script faq et slider était en conflit.
J'ai choisi d'utiliser directement un plugin FAQ pour perdre moins de temps...

Je vais me pencher un peu plus sur les bases.

Merci encore.