Bootstrap isn't bulletproof?

[Thetjo]

Problem: When both jQuery and MooTools are loaded, Twitter Bootstrap seems to be running code from the MooTools library.

Demo (minimal): http://www.tweepixels.nl/bootstrap/

1. Please go to the demo page (note the loading order, the latest versions of all libraries being used and noConflict() already in place).
2. Drag the browser screen small until the menu items disappear and the menu icon appears.
3. Click the menu item to open the dropdown menu, and click it again to close it back up.
4. The menu immediately disappears (without the normal smooth slide-up effect) and can't be dropped down again (Mac OS Lion Chrome) or can be dropped down again, but upon making the browser wide again the menu items never appear back (Mac OS Lion Firefox).

I boiled this behavior down to line 3139 of mootools-more.js in their hide() function, which apparently is being run (something a simple alert() right before line 3139 would show).

If this is a 'MooTools issue' instead of a 'Bootstrap issue', please let me know so I can post the issue on their bug tracker.

Regards,
Theo

[envex]

Why are you running both libraries?

[Thetjo]

Because MooTools is included in Joomla by default and it's nearly impossible to remove all MooTools libraries and references from the code. jQuery is required by Bootstrap (and a great JS library). If it were up to me MooTools was buried in a deep hole, never to be found again.

[mdo]

Sorry, we can't offer support on the presence of two conflicting javascript libraries. Seems like more of a mootools issue based on what you've stated.

[phproberto]

I've also the error reported by Thetjo. Just found this issue searching before posting it as new.

Extended data: This issue only affects Google Chrome and is related to the hide transition. Conflicts with function Events.Pseudos in mootoos-more file.

Hide transition fails and never gets marked as completed. Got it working commenting:

  if (this.transitioning) {
      //return
  }

in show function from bootstrap-collapse.js

Obviously the transition is still broken but menu collapses as expected.

As bootstrap is going to be included in Joomla 3.0 I'll try to fix it. Any help is appreciated. I'm still a mootools man :)

[phproberto]

Seems I've found a way to get it working but as jQuery n00b I'm not going to make a pull request because I'm sure there is a better way to solve it.

My n00b solution is to avoid using the event name that creates the conflict with mootools:

In bootstrap-collapse.js replace:

this.transition('removeClass', $.Event('hide'), 'hidden')

with:

this.transition('removeClass', $.Event('hideme'), 'hidden')

[jatitoam]

Anyone else wondering this, the problem is a pure conflict between mootools-more and jQuery
I created a small Mootools function for removing the hide() Mootools function from the toggle elements. So far it's working.

(function($) {
$$('[data-toggle=collapse]').each(function (e) {
$$(e.get('data-target'))[0].hide = null;
});
})(MooTools);

[florian-denizot]

And it helps. Thanks for sharing Jatitoam