jquery and mootools conflict - one script works, another don't

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.

I've edited my post and add error message. You're right Dr.Molle, I fixed it, but still the same problem with the same message. — culter, Jul 18 '11 at 13:48

Shef · Accepted Answer · 2011-07-18T14:11:20.140

2

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.

edited Jul 18 '11 at 14:11

answered Jul 18 '11 at 13:42

Shef

44,808
15
79
90

Thank you, Shef. Unfortunatelly, it won't work. jQuery part work ok, but mootools don't. Still the same error message. I've uploaded it with your code here: http://www.turie.eu/hlavna3 – culter Jul 18 '11 at 14:00
The mootools part I mean when you click on binocular icon on the map, ther have to display lightbox clone (bumpbox) window. I've tried all tips here http://docs.jquery.com/Using_jQuery_with_Other_Libraries , but nothing works for me. Thank you again! – culter Jul 18 '11 at 14:03
Okay, updated my answer. You should call `jQuery.noConflict();` right after both libraries have been loaded. – Shef Jul 18 '11 at 14:11
Shef, it works! Thank you. But after I added that call(jQuery.noConflict();), there is still one error message: Unsafe JavaScript attempt to access frame with URL http://turie.eu/hlavna3/ from frame with URL http://turie.eu/hlavna3/. Domains, protocols and ports must match. (I've updated the code on server) – culter Jul 18 '11 at 14:17
@culter: Read [this question](http://stackoverflow.com/questions/4324108/unsafe-javascript-attempt-to-access-frame-with-url) for an answer to that problem. – Shef Jul 18 '11 at 14:26
Yes, i'm working on it. Anyway, this question is answered. Thank you! – culter Jul 18 '11 at 14:30

jquery and mootools conflict - one script works, another don't

1 Answers1