CODEWITHSUNDEEP
jquerymootoolsconflict
Matthew Ruddy
Matthew Ruddy

Reputation: 925

Mootools breaking jQuery functionality

Having an issue with Mootools breaking my slideshow scripts jQuery functionality. Cannot pinpoint what is happening, but particularly in Firefox it is destroying the functionality and making my browser unresponsive.

http://newsite.matthewruddy.com/

Can anyone give me any idea what I am doing wrong? I've used jQuery.noConflict() where appropriate but no dice. Firebug doesn't seem to be showing any errors, and when the MooTools script is disabled all is fine. Also, it seems to be less troublesome in other browsers, but still happens the odd time in Safari, Chrome, etc. Most of the time it works fine (very hit and miss).

jQuery is being loaded before MooTools, but the scripting my plugin loads is in the footer, after MooTools is loaded. Can't really work around this, as with Wordpress it is the only way I can get the scripts to load only on pages the slideshows are used on.

Upvotes: 0

Views: 540

Answers (2)

kitti
kitti

Reputation: 14794

The problem seems to be a conflict with the load event. The Riva Slider plugin triggers load on a object, but instead of the jQuery load event firing the mootools load fires instead. For some reason, this causes mootools to retrieve the index of your site via AJAX over and over and over again, which is causing FF to freeze. I would try getting jQuery to load before mootools, or just dump one of them. It's really not a good idea to mix frameworks.

Stack Trace

EDIT: Also, you say that you load jQuery before mootools, but you don't. mootools is loaded in the <head>, while jQuery isn't loaded until the bottom of the page, right before the plugin.

Upvotes: 1

Rizwan Mumtaz
Rizwan Mumtaz

Reputation: 3955

Use jquery before Mootools here is an example script.

<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
    //no conflict jquery
    jQuery.noConflict();
    //jquery stuff
    (function($) {
        $('p').css('color','#ff0000');
    })(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
    //moo stuff
    window.addEvent('domready',function() {
        $$('p').setStyle('border','1px solid #fc0');
    });
</script>

<p>This is a paragraph.</p>

Upvotes: 0

Related Questions