11548 sujets

JavaScript, DOM et API Web HTML5

Probleme entre jQuery & mootools

Bonjour à tous ,
Je travail en ce moment sur un site pour lequel j'utilise mootools, pour faire apparaitre une "fenetre", et je voudrais utiliser jQuery pour faire apparaitre une "bulle" d'information au passage de la souris sur une certaine zone.

Vous pouvez voir le site ici. En cliquant sur "s'enregistrer", vous pouvez en effet voir le script mootools qui marche, et la bulle d'information ne marche pas tant que je laisse le script précédent (La bulle devrait apparaitre quand on place le curseur sur l'icone de la maison, en haut a droite).
Donc les deux marchent, mais pas ensemble Smiley decu

Et un petit bout de code...

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sentiers Maritimes</title>
    <!-- CSS -->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="menu.css" rel="stylesheet" type="text/css" />
    <link href="bulles.css" rel="stylesheet" type="text/css" />

	<!-- START MooSlide -->
	<!-- The CSS -->
  	<link rel="stylesheet" href="mooslide.css" type="text/css" media="screen" />
    <!-- Mootools - the core -->
	&lt;script type="text/javascript" src="js/mootools12.js"></script>
    <!-- MooSlide (show/hide login form) -->
	&lt;script type="text/javascript" src="js/mooSlide2-moo12.js"></script>
	&lt;script language="javascript" type="text/ecmascript">
	window.addEvent('domready',function(){
		var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500,  toggler:'login', content:'loginPanel', height:250, close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
		//optional: AutoStart the slider on page load:
		//MyLogin.run();
	    $('close').addEvent('click', function(e){
			e = new Event(e);
			myLogin.clearit();
			e.stop();
		});
	});
	</script>

&lt;script type="text/javascript" src="js/jquery-latest.js"></script>
&lt;script type="text/javascript"></script>
&lt;script type="text/javascript" src="js/bulle.js"></script>
</head>


Merci d'avance !
Salut,

a écrit :
Donc les deux marchent, mais pas ensemble
C'est normal:
- jQuery est chargée en premier, elle déclare une fonction $()
- ensuite MooTools est chargée, elle dispose aussi d'une fonction $() et remplace donc celle déclarée par jQuery

À partir de ce moment-là, quand tu appelles $(blabla), c'est donc le code de MooTools qui est invoqué. Or tu utilises du code jQuery pour coder ton infobulle. Tu vois le problème ? Smiley smile

Solution(s)
Perso, pour le peu de js nécessaire sur sur ton site, je ne crois pas que 2 bibliothèques soient nécessaires. J'en chargerais qu'une et je ferais tout avec elle. Et encore...
Sinon, jQuery possède la méthode noConflict(), qui lui permet de fonctionner avec une autre bibliothèque à côté.
Utilisation dans ton cas :

Au lieu de :
$(document).ready(function() {
    /* ton code utilisant $() */
});
utilise : 
jQuery.noConflict();
jQuery(document).ready(function($){
    /* ton code, même avec $() */
});

Modifié par marcv (10 May 2009 - 19:37)
Salut,
Merci beaucoup, ça marche nikel (j'ai pas upload les modifs ^^).
Oui je sais que ce serait plus simple de n'utiliser qu'une seule bibliotheque mais je ne les maitrise pas trop encore, je "magouille" et vu que je n'ai qu'un mois pour faire ce site je préfère faire comme ça, je serais plus rapide je pense Smiley ohwell

En tout cas merci encore !
hare a écrit :
Oui je sais que ce serait plus simple de n'utiliser qu'une seule bibliotheque

Ça ferait surtout ça de code JavaScript en moins à télécharger puis analyser pour le navigateur, et donc des pages plus réactives...

(J'allais relever les gros gros problèmes d'optimisation des images, mais je suppose qu'ils sont connus et que le boulot là-dessus est prévu?)
Sujet clos
Aller à