Help with jQuery and Mootools Conflict

JavaScript
1

Hello all,

I am trying to use both jQuery and Mootools in one site im building. I have researched the web including http://jquery.com/ with no luck.

I have tried loading jQuery after Motools with no luck. My research indicates mootools needs to go first.

I have also tried below but that doesn’t seems to work? im not sure if i have another issue?

(function($){
// code with the jQuery $ can safely go in here
})(jQuery);

Thanks guys.


```html4strict

```html4strict

    <title>test</title>
     
    <link rel="stylesheet" type="text/css" href="index.css" />
	
	<script type="text/javascript" src="js/jquery-latest.js"></script><!-- jQuery  -->
	
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/mootools-more.js"></script>
    <script type="text/javascript">
            window.addEvent('domready', function()
            {
                //MooTools smoothScroll
                var smoothScroll = new SmoothScroll({duration: 2800});
               
 //  MooTools
	
	var myPages3 = $$('.page3');
	var myBubbles3 = $$('.bubble3');
	
	myBubbles3.setStyle('opacity', 0);
	$('bubbleWrap3').setStyle('visibility','visible')
	
	myPages3.each(function(el, i) {
		el.set('morph', {link : 'cancel'});
		
		el.addEvents({
			'mouseenter': function() {
				myBubbles3[i].morph({
					'opacity' : 1,
					'margin-top' : '-15px'
				});
			},
			'mouseleave' : function() {
				myBubbles3[i].morph({
					'opacity' : 0,
					'margin-top' : 0
				});
			}	
		});
	});

 </script>    


<!--------------------------------------------------------------- jQuery  -->
<script type="text/javascript"> 
$(document).ready(function(){
 
 
$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-110px', 
			marginLeft: '-110px', 
			top: '50%', 
			left: '50%', 
			width: '174px', 
			height: '174px',
			padding: '20px' 
		}, 200);
	
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '100px', 
			height: '100px', 
			padding: '5px'
		}, 400);
});
 
	$("ul.thumb li a").click(function() {
		
		var mainImage = $(this).attr("href"); 
		$("#main_view img").attr({ src: mainImage });
		return false;		
	});
 
});
</script>
<!----------------------------------------------------------------------- jQuery  -->


</head>
<body>

</body>
</html>
</html>
2

Hi,

It’s recommended not to mix libraries so you’d be better off choosing one and sticking to it.
The thing that clashes is which libraries $ function wins out.


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Now jQuery no longer owns $ - All those functions are moved to the jQuery object instead.
</script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
// Mootools code can go here

(function($){
  // jQuery code can go here
})(jQuery);
</script>

That last section is called a self executing function and can be used to rename variables and limit scope.

We pass the jQuery object in as the $ parameter which means code in there like $(‘example’) is actually calling jQuery(‘example’)

Hope it helps,

3

Thank you! Yes that helped and worked :slight_smile:

Thanks again for your help guys :slight_smile:

Cheerio