Jquery-Mootools conflict

Question

i have been trying to make 2 scripts(1 mootol and 1 jquery) work at the same page to no avail..been researching many a forums and all but i still cant make the 2 work simultaneously.

this is how it looks in my header:

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"> 
     jQuery.noConflict();
$(document).ready(function () { 
         var hide = false; 
     $("#posts-menu, .submenu").hover(function(){ 
         if (hide) clearTimeout(hide); 
         $(".submenu").fadeIn(); 
     }, function() { 
         hide = setTimeout(function() { 
             $(".submenu").fadeOut("slow"); 
         }, 250); 
     }); 

})(jQuery);
    </script>       
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/mootools-core-1.3.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/wall.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/wall-lide.js"></script>

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

window.addEvent('domready',function(){


    // -- horizontal
    var myHorizontalSlide = new Fx.Slide('login-welcome-div-slide', {mode: 'vertical'});


    $('slideout').addEvent('click', function(event){
        event.stop();
        myHorizontalSlide.slideOut();
    });


});

// -->  
</script>

i managed the mootools script to work even if theres a jquery.js call... you can see that i already used jQuery.noConflict(); in the 3rd line..

the problem is that the mootool scripts works if the jquery.noconflict is there but the jquery scripts doesnt work! now if remove the jquery.noconflict its now the other way around, the jquery script works but not the mootool scripts..i just couldnt make the 2 of them work!

any kind of help would be greatly appreciated..

Answer 1

From a MooTools point of view.

You're including MooTools after jQuery. That's good. Because (if you don't use jQuery.noConflict), MooTools will see $ is already used by someone else and will leave it as it is.

You will have to replace the $ function with document.id() in your MooTools scripts.

jQuery has this noConflict mode. When using it, you will have to replace the $ function from jQuery with jQuery().

Either you replace the occurrences or you can use anonymous functions to keep the references to $ in your scripts and make it an alias for MooTools' document.id() or jQuery's jQuery().

(function($) {
    // $ will refer to MooTools' document.id() in this anonymous function
    // ...
})(document.id);

(function($) {
    // $ will refer to jQuery's jQuery() in this anonymous function
    // ...
})(jQuery);

Answer 2

The problem is that you are not enclosing the jQuery code within an anonymous function. Try this:

(function($){
    // inside here $ will always mean jQuery
    $(document).ready(function () { 
         var hide = false; 
         $("#posts-menu, .submenu").hover(function(){ 
             if (hide) clearTimeout(hide); 
             $(".submenu").fadeIn(); 
         }, function() { 
             hide = setTimeout(function() { 
                 $(".submenu").fadeOut("slow"); 
             }, 250); 
         }); 
    });
})(jQuery);

Answer 3

You're clobbering the $.

<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>

Answer 4

Use jQuery (case-sensitive) instead of $ for the jQuery parts.

Answer 5

You can try including the jQuery library before the MooTools library.

This document should illustrate better

Answer 6

When you run in noConflict mode you can't use the $ convenience method. You have to use the full form jQuery instead.

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Please avoid the use of 2 js libraries as it will increase your page load time which in turn has SEO implications (negative ones).