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.