New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mootools-more.js conflicting with Bootstrap Carousel #475

Closed
judgestone opened this Issue Oct 4, 2012 · 22 comments

Comments

Projects
None yet
@judgestone

judgestone commented Oct 4, 2012

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

This comment has been minimized.

Show comment
Hide comment
@youjoomla

youjoomla Oct 11, 2012

Contributor

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

Contributor

youjoomla commented Oct 11, 2012

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

@judgestone

This comment has been minimized.

Show comment
Hide comment
@judgestone

judgestone Oct 11, 2012

Worked a treat, thank you youjoomla.

judgestone commented Oct 11, 2012

Worked a treat, thank you youjoomla.

@jwhelan72

This comment has been minimized.

Show comment
Hide comment
@jwhelan72

jwhelan72 Oct 15, 2012

Where does that go to correct the conflict problem?

  • JW

jwhelan72 commented Oct 15, 2012

Where does that go to correct the conflict problem?

  • JW
@judgestone

This comment has been minimized.

Show comment
Hide comment
@judgestone

judgestone Oct 16, 2012

Insert it into your template index.php file.

judgestone commented Oct 16, 2012

Insert it into your template index.php file.

@jwhelan72

This comment has been minimized.

Show comment
Hide comment
@jwhelan72

jwhelan72 Oct 16, 2012

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.

jwhelan72 commented Oct 16, 2012

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

This comment has been minimized.

Show comment
Hide comment
@infograf768

infograf768 Oct 16, 2012

Member

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

Member

infograf768 commented Oct 16, 2012

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

@youjoomla

This comment has been minimized.

Show comment
Hide comment
@youjoomla

youjoomla Oct 16, 2012

Contributor

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 .

Contributor

youjoomla commented Oct 16, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mbabker

mbabker Oct 16, 2012

Member

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.

Member

mbabker commented Oct 16, 2012

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

This comment has been minimized.

Show comment
Hide comment
@infograf768

infograf768 Oct 17, 2012

Member

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

Member

infograf768 commented Oct 17, 2012

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

@waveywhite

This comment has been minimized.

Show comment
Hide comment
@waveywhite

waveywhite Oct 19, 2012

Contributor

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

waveywhite commented Oct 19, 2012

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

This comment has been minimized.

Show comment
Hide comment
@youjoomla

youjoomla Oct 19, 2012

Contributor

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 .

Contributor

youjoomla commented Oct 19, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jwhelan72

jwhelan72 Oct 20, 2012

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

jwhelan72 commented Oct 20, 2012

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

This comment has been minimized.

Show comment
Hide comment
@waveywhite

waveywhite Oct 21, 2012

Contributor

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.

Contributor

waveywhite commented Oct 21, 2012

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

This comment has been minimized.

Show comment
Hide comment
@youjoomla

youjoomla Oct 22, 2012

Contributor

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

Contributor

youjoomla commented Oct 22, 2012

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

This comment has been minimized.

Show comment
Hide comment
@stutteringp0et

stutteringp0et Mar 31, 2013

Contributor

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

stutteringp0et commented Mar 31, 2013

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

This comment has been minimized.

Show comment
Hide comment
@nicksavov

nicksavov May 5, 2013

Contributor

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!

Contributor

nicksavov commented May 5, 2013

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

This comment has been minimized.

Show comment
Hide comment
@stutteringp0et

stutteringp0et May 10, 2013

Contributor

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

Contributor

stutteringp0et commented May 10, 2013

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

@Ciul

This comment has been minimized.

Show comment
Hide comment
@Ciul

Ciul Jun 6, 2013

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

Ciul commented Jun 6, 2013

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

This comment has been minimized.

Show comment
Hide comment
@cheesegrits

cheesegrits Jul 23, 2013

Contributor

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.

Contributor

cheesegrits commented Jul 23, 2013

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 comment has been minimized.

Show comment
Hide comment
@njbair

njbair Aug 9, 2013

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!

njbair commented Aug 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@brianteeman

brianteeman Oct 13, 2013

Contributor

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

Contributor

brianteeman commented Oct 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@Alekuoshu

Alekuoshu Jan 28, 2017

thanks Youjoomla, work perfect

Alekuoshu commented Jan 28, 2017

thanks Youjoomla, work perfect

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment