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

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);