jQuery and Mootools Conflict

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

Can anyone help me please?


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

This looks more like a JS question, not a general development one.
Try posting your questions in the right forum, it’ll increase your possibilities of a quick and useful answer :slight_smile:

And sorry, can’t help you with your problem. Let’s hope one of the JS experts will take a look at it.

3

Try loading jQuery after Motools and if that does not work then Googling for jQuery and Motools conflict.

As a last resort try searching for jQuery.noConflict().


The correct place for the jQuery.noConflict() call would be after mootools, 
after jQuery (which you've got in the right order - mootools first, then 
jQuery), and before any other javascript code that makes use of either. So 
after line 533, before line 536. 
But you also need to fix lines 536 to 540 by either substituting jQuery for 
the $, or wrapping them in this pattern: 
(function($){ 
  // code with the jQuery $ can safely go in here 
})(jQuery);

.

4

Thank you! 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);

I’ll post this in jQuery forum to see if someone can help there.

Thanks guys.