How do I get jQuery and Mootools on the same Contao page?

Question

I am working on a Contao site that is supposed to be upgraded from 2.11.6 to 3.5.40 because the provider will soon force a PHP upgrade from 5.6 to 7.3. The upgraded site should look and feel like the old site.

I have already done the Contao upgrade, and all pages look fine except the home page, which uses two extensions:

• MenuMatic 0.68.3 for the main navigation (all pages use this)
• FlexSlider 1.4.3 directly underneath the menu (only on the home page)

MenuMatic uses Mootools, FlexSlider uses jQuery. The two extensions don't seem to work together. If I enable only Mootools, the menu works (hovering over one of the top elements drops down the submenu); if I add the FlexSlider content element with jQuery, the slider works, but not the menu dropdown. I haven't found a slider with fade option that runs with Mootools on contao 3.5.

MenuMatic injects these scripts on the page:

<!-- Load the MenuMatic Class -->
<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>

<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
    window.addEvent('domready', function() {
    var myMenu = new MenuMatic();
    });
</script>

This is what I tried:

• use a pure CSS menu: works on a simple html page, not on the Contao home page – no dropdown
• insert jQuery.noConflict() in the FlexSlider inline script
• wrap flexslider.js with jQuery(document).ready(function( $ ) { ... });

FlexSlider inline script with noConflict:

<script type="text/javascript">
    /* <![CDATA[ */
    jQuery.noConflict();
    (function($) {
    $(window).load(function() {
        $("#schule").flexslider({
        slideshowSpeed: 6000,
        animationSpeed: 3000,
            animation: "fade",
        direction: "horizontal",
                    controlNav: false,
                    directionNav: false,
            randomize: false,
            pauseOnHover: false,
                pauseOnAction: true,
        useCSS: false,
            touch: true
        });
    });
    })(jQuery);
    /* ]]> */
</script>

Can you help?

See my answer below.

Answer 1

Replace your MenuMatic script with https://gist.github.com/DimitarChristoff/7354353 for example.

Answer 2

I found the answer in two places:

1) https://gist.github.com/DimitarChristoff/7354353

Change js/Menumatic_0.68.3.js

from

var MenuMatic = new Class( {...} );
var MenuMaticSubMenu = new Class( {...} );

to

var MenuMatic;
var MenuMaticSubMenu;
(function ($) {
    MenuMatic = new Class( {...} );
    MenuMaticSubMenu = new Class( {...} );
}(document.id));

2) jQuery/Mootools Conflict - Cant't find solution

Change assets/jquery/core/1.11.3/jquery.min.js

add jQuery.noConflict(); at the end.

The noConflict in the FlexSlider script was not needed.

Another setting is needed though. In the page layout the jQuery and Mootools source should be set to CDN with local fallback. Don't really know why.

Menu and Slider work together!