Mootools-more.js conflicting with Bootstrap Carousel

[danielstenson]

The mootools-more.js conflicts with the Twitter Bootstrap Carousel. After a bit of research online it would appear to be a conflict with the Fx.Slide element of mootools-more.js.

[youjoomla]

here is the fix

if (typeof jQuery != 'undefined') {
(function($) {
$(document).ready(function(){
$('.carousel').each(function(index, element) {
$(this)[index].slide = null;
});
});
})(jQuery);
}

we can also check for existence of mootools first before doing this like

if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined' ) {
// both present , kill jquery slide for carousel class
(function($) { 
       $(document).ready(function(){
        $('.carousel').each(function(index, element) {
                $(this)[index].slide = null;
               });
         });
 })(jQuery);
}

this fix is suggested by jq bug squad
http://bugs.jqueryui.com/ticket/4168

[danielstenson]

Worked a treat, thank you youjoomla.

[jwhelan72]

Where does that go to correct the conflict problem?

• JW

[danielstenson]

Insert it into your template index.php file.

[jwhelan72]

I did and it works great. Thank you!

And, I have jQuery, Mootools, and Bootstrap all running at the same time. (stupid I know).

Thanks again.

[infograf768]

if the fix does not concern J! core, please close Issue.

[youjoomla]

This should concern the core since jq bootsrtap and moo run together. This should be added in head or in bootstrap js to check for mootools existence .

[mbabker]

We've already added modifications to the bootstrap.js files for one of the other conflicts, so I personally don't see a huge issue with modifying that file directly so long as the change is clearly indicated in the file. Check here for what we did for the Dropdown plugin. And this line fixes a conflict we ran into with MooTools and jQuery in the Collapse plugin.

[infograf768]

If a patch is proposed, please create a PR, a tracker on joomlacode and cross-reference in the PR

[waveywhite]

The current suggested fix avoids the conflict but the standard way of auto-starting a Bootstrap carousel no longer works.

I'd like to suggest an alternative approach. Please don't hobble jQuery, It's better to hobble Mootools as developers will be using jQuery with Bootstrap and won't like it that the standard code doesn't work. How about this instead, after the Mootools include?

    Element.implement({
        slide: function(how, mode){
            return this;
        }
    });

[youjoomla]

SWEET! much cleaner and no loops

window.addEvent('domready', function(){
if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined' ) {
Element.implement({
slide: function(how, mode){
return this;
}
});
}
 });
add in head or file

thank you, I would rather go for this .

[jwhelan72]

OK. So there are two ways to prevent this conflict. Can someone add a note about the relative merits of each and when one should be chosen over the other? I'm new to javascript and often see the solutions to these kinds of problems without the all-important 'why use this?' or 'why does it work?'. And, thanks for these too. It's made my Joomla implementation go a lot smoother.

• JW

[waveywhite]

Others may like to add their penny's worth. This is how I'd sum it up.

Method #1
if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined' ) {
// both present , kill jquery slide for carousel class
(function($) {
$(document).ready(function(){
$('.carousel').each(function(index, element) {
$(this)[index].slide = null;
});
});
})(jQuery);
}

This disables the jQuery carousel (if your carousel has a class of .carousel). Gets around the conflict but has the side-effect of disabling the carousel slide animation. Other possible issues is this only works for carousels with a particular class and it features a loop (hence more processing).

Method #2
window.addEvent('domready', function(){
if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined' ) {

Element.implement({
slide: function(how, mode){
return this;
}
});
}
});

This turns-off the Moo-tools Fx.Slider feature by overriding a function so that it does nothing. Benefits are that it allows the normal Bootstrap carousel function to do it's thing, doesn't need a loop and doesn't rely on calling your carousel by a particular class. Only possible downside is if you're relying on Mootools Fx.slider as it now won't do anything.

Summary:
If you're using Bootstrap use method 2. If you want Mootools slider you're probably not using Bootstrap so Method 2 wouldn't trigger anyway.

[youjoomla]

nice explanation waveywhite , the 2nd method can be perfected by checking the .carousel class, as it is expected more or less , not to have 2 featured sliders on same page , this way we don't have to disable Mootools FX.slide completely since there are plenty of sliders out there that are using it
simple:
if( $('.carousel') ){

// method 2
}

would do the trick

[stutteringp0et]

Neither provided function enabled the carousel to autostart for me, so I implemented this slight modification (and removal of $) to the first method.

        jQuery(document).ready(function(){
            jQuery('.carousel').each(function(index, element) {
                jQuery(this)[index].slide = null;
            });
            jQuery('.carousel').carousel('cycle');
        });