jQuery et Mootools : conflit

Bonjour,

J'utilise jQuery et Mootols en même temps sur mon site. Puisque jQuery et Mootools utilisent tous les deux la variable "$", je dois utiliser une fonction spéciale de jQuery qui me permet de changer la variable de base.

var J = jQuery.noConflict();

Pour la plupart de mes pages, ça fonctionne. Cependant, certaines pages où j'utilise jQuery viennent désactiver les fonctions Mootools de mon menu déroulant.

Je montre le code, peut-être que quelqu'un pourrait voir l'erreur?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script type="text/javascript">
 
	var J = jQuery.noConflict();
	var cT = ("#youthcharacterstitle p");
 
	J(document).ready(function(){			
 
		J(cT).text("Espace Jeunesse");
 
		J(".youthc").mouseout(function(){
			if (J(".pageyouth2#youthc1page").is(":visible")) {
				J(cT).text("0-5 ans : La p'tite pasto");
				J(".youthc#youthc1").fadeTo("fast", 1);
				J(".youthc:not(#youthc1)").fadeTo("fast", 0.33);
			} else if (J(".pageyouth2#youthc2page").is(":visible")) {
				J(cT).text("3-6 ans : Les Agnelets de Jésus");
				J(".youthc#youthc2").fadeTo("fast", 1);
				J(".youthc:not(#youthc2)").fadeTo("fast", 0.33);
			} else if (J(".pageyouth2#youthc3page").is(":visible")) {
				J(".youthc#youthc3").fadeTo("fast", 1);
				J(".youthc:not(#youthc3)").fadeTo("fast", 0.33);
				J(cT).text("6-12 ans : Liturgie des jeunes");
			} else if (J(".pageyouth2#youthc4page").is(":visible")) {
				J(cT).text("7-17 ans : Chorale de Noël");
				J(".youthc#youthc4").fadeTo("fast", 1);
				J(".youthc:not(#youthc4)").fadeTo("fast", 0.33);
			} else if (J(".pageyouth2#youthc5page").is(":visible")) {
				J(cT).text("Adolescents");
				J(".youthc#youthc5").fadeTo("fast", 1);
				J(".youthc:not(#youthc5)").fadeTo("fast", 0.33);
			}
		});
 
		J(".youthc").mouseover(function(){
			J(this).fadeTo("fast", 1);
			if (J(this).is(".youthc#youthc1")) {
				J(cT).text("0-5 ans : La p'tite pasto");
				J(this).fadeTo("fast", 1);
				J(this).fadeTo("fast", 0.33);
			} else if (J(this).is(".youthc#youthc2")) {
				J(cT).text("3-6 ans : Les Agnelets de Jésus");
					J(this).fadeTo("fast", 1);
				J(this).fadeTo("fast", 0.33);
			} else if (J(this).is(".youthc#youthc3")) {
				J(cT).text("6-12 ans : Liturgie des jeunes");
					J(this).fadeTo("fast", 1);
				J(this).fadeTo("fast", 0.33);
			} else if (J(this).is(".youthc#youthc4")) {
				J(cT).text("7-17 ans : Chorale de Noël");
					J(this).fadeTo("fast", 1);
				J(this).fadeTo("fast", 0.33);
			} else if (J(this).is(".youthc#youthc5")) {
				J(cT).text("Adolescents");
					J(this).fadeTo("fast", 1);
				J(this).fadeTo("fast", 0.33);
			} else	{
			}
		});
 
		J(".youthc").click(function(){
			if (J(".pageyouth2#" + J(this)[0].id + "page").is(":hidden")) {
				J(".pageyouth2:not(#" + J(this)[0].id + ")").slideUp("slow");
				J(".pageyouth2#" + J(this)[0].id + "page").slideDown("slow");
				J(".youthchar:not(#" + J(this)[0].id + ")").fadeTo("slow", 0.33);
			} else if (J(this).is(".youthc#youthc1")) {
				J(cT).text("0-5 ans : La p'tite pasto");
			} else if (J(this).is(".youthc#youthc2")) {
				J(cT).text("3-6 ans : Les Agnelets de Jésus");
			} else if (J(this).is(".youthc#youthc3")) {
				J(cT).text("6-12 ans : Liturgie des jeunes");
			} else if (J(this).is(".youthc#youthc4")) {
				J(cT).text("7-17 ans : Chorale de Noël");
			} else if (J(this).is(".youthc#youthc5")) {
				J(cT).text("Adolescents");
			} else	{
			}
		});
 
		//J('.youthc').tooltip({ 
			//track: true, 
			//delay: 0, 
			//showURL: false, 
			//showBody: " - ", 
			//fade: 250 
		//});
 
	});
 
</script>

Vous pouvez voir le site ici

http://www.hugofournier.com

Les pages qui boguent sont : Espace jeunesse, activités de financement et les 4 pôles.

Merci!

Bonsoir.

La seule chose que j'ai examinée est le head de la première page.

Il y a du ménage à faire, il faut regrouper tous les styles avant les scripts, l'ordre dans lequel ils sont inclus a une grande importance.

Les trois dernières lignes du head doivent être :
Code:

1 2 3 4 5 6  <script src="http://www.hugofournier.com/wp-includes/js/jquery/jquery.js?ver=1.3.2" type="text/javascript"> </script> <script src="http://www.hugofournier.com/wp-content/themes/saint-ambroise/scripts/jquery.tooltip2.js" type="text/javascript"> </script>
On s'aperçoit alors que vous chargiez deux fois la librairie jQuery.

Je vous conseille de vérifier toutes les pages de votre site.

Salut,

Merci de ton conseil, ça ma permis de régler mon problème.

Voilà, j'avais oublié qu'il fallait que je charge Mootools en dernier et plus aucun jQuery après, je ne sais pas trop pourquoi, mais ça bloque Mootools complètement.

Je sais que certaines feuilles de styles s'ajoutent par la suite, mais il s'agit souvent de plugins qui viennent lier leur feuille de style respective. Pour ma part, dans mon header de base, tout est en ordre. De plus, certains plugins viennent re-charger jQuery car ils en ont besoin... j'imagine que ce n'est pas l'idéal, mais je ne sais pas trop comment l'empêcher.

Bref, j'ai sorti mon jQuery de mon fichier modèle PHP pour le mettre dans un .JS lié AVANT le Mootools dans mon header et les deux fonctionnent correctement.

Merci encore! :mrgreen: