Question

Ok, I use mootools to display flash content through google maps and I work hard to make it work properly, so there is little chance to switch it to jQuery. On the other side, I see jQuery more useful to every other things so I’m trying to make it work together. That’s for explanation. Now here is the code.

this jQuery script I use to show/hide animation and it works with mootools perfectly

<script type="text/javascript">
jQuery(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
 jQuery('#slickbox').hide();
 // toggles the slickbox on clicking the noted link  
  jQuery('#slick-toggle').click(function() {
    jQuery('#slickbox').toggle(400);
    return false;
  });
});

recently, I added scrit to animate flowing menu and I can’t get it work. I’ve tried to apply noConflict, but it didn’t work. Here is the code:

<script language="text/javascript">
var $j = jQuery.noConflict();
var name = "#floatMenu";
var menuYloc = null;
    $j(document).ready(function(){
        menuYloc = parseInt($j(name).css("top").substring(0,$j(name).css("top").indexOf("px")))
        $j(window).scroll(function () { 
            offset = menuYloc+$(document).scrollTop()+"px";
            $j(name).animate({top:offset},{duration:500,queue:false});
        });
    }); 
 </script>

Error message is Uncaught TypeError: Object # has no method ‘dispose’
Thank you very much.

Answer 1

Format your code this way, and there is no need to use noConflict(). Call jQuery.noConflict(); right after the jQuery and MooTools library have been loaded.

<script type="text/javascript">
(function($){
    var name = "#floatMenu",
        menuYloc = null;
    $(document).ready(function(){
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
        $(window).scroll(function () { 
            var offset = menuYloc+$(document).scrollTop()+"px";
            $(name).animate({top:offset},{duration:500,queue:false});
        });
    });
})(jQuery);
</script>

This will encapsulate your code to a function, which will be passed the jQuery object. Anywhere you use $ inside that function it will reference jQuery.

Also, there is no attribute language with the value "text/javascript", it’s the type attribute, which should have that value. Don’t use the language attribute anymore.