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');
        });

[nicksavov]

Hi all,

Thanks for posting this! Can you send a pull request? If you need to learn how, check out this tutorial:
http://docs.joomla.org/Git_for_Coders

While we’re transitioning to a new integrated tracker, the JoomlaCode tracker is where we do most of Joomla's bug fixing. You can find out more about the process at:
http://docs.joomla.org/Filing_bugs_and_issues

Let me know if you have any questions and I'll be glad to answer. Thanks again!

[stutteringp0et]

@nicksavov
Thanks for posting those links - the first one in particular, I have been wondering who to ask.

[luiscarlosjayk]

Hi everyone, I had the same problem and after reading your comments and diving into jQuery and MooTools Native Code, I could figure out how to solve in a more elegant way the conflict that wasn't letting me use the collapse bootstrap plugin.
Ah, and withouth disabling neither the MooTools or jQuery functionalities.

I figured out that the problem was on MooTools hide, show method, thus, I made an override of them.

// This is based on MooTools/More Refactor plugin
var mHide = Element.prototype.hide;
var mShow = Element.prototype.show;

// Override them
Element.implement({
hide: function() {
if (this.hasClass('mootools-noconflict'))
return this;

mHide.apply(this, arguments);

},
show: function(v) {
if (this.hasClass('mootools-noconflict'))
return this;

mShow.apply(this, v);
}
});

And that's it!

It allowed me to use again the bootstrap collapsible plugin by adding 'mootools-noconflict' class to those elements that I want to use jQuery bootstrap and no MooTools.

Regards

[cheesegrits]

Thanks @Ciul, that was exactly what I needed.

One note ... I had to add the slide() function to the implement() to get the carousel working, as it's using slide, not hide/show.

And for anyone wondering, it's the main carousel div you add mootools-noconflict to, so class="carousel slide mootools-noconflict".

var mHide = Element.prototype.hide;
var mShow = Element.prototype.show;
var mSlide = Element.prototype.slide;

Element.implement({

    /*
     * These are needed to get some of the JQuery bootstrap built in effects working,
     * like the carousel, and require you to add the 'mootools-noconflict' class to
     * containers you want to use those effect with, like ...
     * <div class="carousel slide mootools-noconflict">
     */

    hide: function () {
        if (this.hasClass("mootools-noconflict")) {
            return this;
        }
        mHide.apply(this, arguments);
    },

    show: function (v) {
        if (this.hasClass("mootools-noconflict")) {
            return this;
        }
        mShow.apply(this, v);
    },

    slide: function (v) {
        if (this.hasClass("mootools-noconflict")) {
            return this;
        }
        mSlide.apply(this, v);
    }
});

Works like a charm., doesn't cripple either JQuery or Moo, allowing me to be selective.

(The change in format is to keep js.lint happy in my build process)

Thank you.

[njbair]

This is great, thanks!

I've got a Joomla 3 site with K2 installed. I replaced the buggy JUI Bootstrap with a vanilla copy, and that's when I started having problems with the accordion collapse interactions. I'm using @cheesegrits variation and it's working great.

To clarify a bit more, I applied the mootools-noconflict class to the accordion-body div, like so:

<div class="accordion" id="myAccordion">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#itemOne">Item One</a>
    </div>
    <div id="itemOne" class="accordion-body collapse mootools-noconflict">
      <div class="accordion-inner">
        <p>Here's some stuff!</p>
      </div>
    </div>
  </div>
</div>

I am also using the jQuery Easy plugin to load jQuery v1.9.1 and to strip the auto-loaded media/jui/js/bootstrap.min.js.

Hope this helps!

[brianteeman]

Thanks for reporting this. At this time we are only using github as the place to submit code fixes so I am closing the report here. The actual reporting of issues and testing fixes is still taking place on Joomlacode.

As it has been some time since you opened this issue can you please confirm that it is still valid with the current Master or Joomla 3.2 beta.

If it is still valid please can you open an item on the Joomlacode tracker in the appropriate area.

CMS Bug Reports: http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemBrowse&tracker_id=8103

CMS Feature Requests: http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemBrowse&tracker_id=8549

[Alekuoshu]

thanks Youjoomla, work perfect