Using jQuery and MooTools Together

Definitely will be referring back to this. Thanks, David!

First and foremost, we, as web developers should always make an effort to only use one library – and put forth the time and effort to only utilize ONE library at a time. If someone wants a jquery plugin, they should rewrite it for mootools. If they want a class from mootools, that should write it for jquery.

I’m seeing an increase of people who just look at what the libraries are doing, and throw them all together on one page “just because it’s easier” – if someone sees this as a viable option as opposed to actually doing the work of rewriting javascript for one library, they really shouldn’t be in the web dev profession.

I’d like to accentuate the “just because it’s easier” – as it does happen sometimes where you’re put in a situation where rewriting a mootools class or a jquery plugin isn’t feasible (generally speaking, time constraints coupled with financial issues), so it’s bound to happen. I just hope web developers don’t look at the “noConflict()” option as a “I can always be lazy” and do their best to utilize one library.

And I’m totally with you on knowing more than one – and rewriting jQuery for MooTools and vice-versa has been my best method to learning and understanding how the two libraries function.

Great Article. There’s actually some really well-done web pages that make use of both libraries. Like a certain David Walsh.

I agree with @keif entirely. Choose a library and use it. There are very few reasons to use more than one. The only reason that I can think of is if you’re in the process of migrating a project from one to the other. If you need to continue working with the old library while you port to the new one, it makes sense. Otherwise you’re basically saying that you don’t care if your users have to deal with your bloated pages.

The majority of my work tends to be “built from scratch” so I can just use one – but as clients come back down the road with both the old code mixed with new code, and they ask “why does it take forever to download my home page?” …which is kind of obvious when they have full libraries of uncompressed javascript.

Granted, it’s less of an issue if JS is minified and gzipped, but that’s not always an option , and I’m all about squeezing every byte of possible juice out of a download (which is also why I prefer working with one framework).

A perfect example of something crazy:
http://www.nintendo.com/games/guide#qhardware=Wii&qesrbRating=&qplay=&qgenre=&qrelease=&panel=qgenre
(from Ajaxian) MooTools, DoJo, swfobject, et. al. Yes, it’s gzipped, but god awful, slow and horrendous.

It was the first time in the history of ever I actually sent a company an email about their site. And even worse, it started with:

“Nintendo, I never thought I’d say this, but I’m disappointed in you.”

I wish. I never received a follow-up.

Thus dashes my hopes that Nintendo would go “hey, we need to hire that guy!”

You can also write that is most clear in the code :

<script type=”text/javascript”>
var JQ = jQuery.noConflict();
</script>

and then put JQ in place of $ in the code :

JQ(‘p’).css(‘color’,'#ff0000′);

@thomtom
To change jQuery reference you should write like this:

var JQ = jQuery.noConflict(true);

No, because with this method, the variable “$” and “jQuery” are replaced by JQ. In this code, with the mootools framework, we want to change the variable $. So var JQ=jQuery.noConflict();

@thomtom
To change jQuery reference you need the “true”
i think you should look here:
link text

Yes if you want to use different jQuery framework as Yahoo.query and dojo.query simultaneously. Out here is to combine mootools and jQuery. Otherwise some jQuery plugin will not work and should be changed. And it would be tedious to maintain the code if there are updates plugins.

Look that, but it’s in french :

You must be some sort of voodoo wizard monster

@keif and @aaron

I agree, but maybe not all the guys are so lucky to have enough time and money to spend porting classes from other libraries, nor to study other libraries…

@Luca:

It’s never a matter of money – it’s a matter of skill! (har har)

I’m not paid to learn at work – I use free time to learn other libraries and expand my skill sets, so when the issues arrive, I can just do it versus learn to do it – “money and time” are two things that are highly stressed to keep low – “fast and cheap” – so I wouldn’t exactly say the company I work for thrives on having clients pay for my learning experiences – they pay for my expertise.

As well, you should explain to clients the caveat of meshing multiple libraries together, and the benefits of paying to have it all consolidated in one. “Not knowing how” is the perfect reason to learn how, so you become more valuable as a developer.

Why do they both use $?

If by fun you mean random cursing and the sudden urge to pull your hair out then yes, immense fun!

What should I do when I can’t split jQuery and Mootools part of code? I mean when I’m using some onclick functions made in jQuery after Mootools stuff?

Mixing jQuery and Mootools is fine. Development in mootools is all about classes, inheritance, etc… The two overlap in some areas but in my experience people are usually using jQuery or YUI for the effects.

I’m new to mootools, I come from the jQuery world and I’m really frustrated. Why is there so little useful documentation for mootools? And the plugins are even worse, take multibox; I’m using it at work and how does one use it?

Seriously I think mootools needs better doc, esp for some1 starting out.

Where would I go to learn something about mootools like how to use it?

I’m sorry I’m a bit bitter, but I think its for good reason.

There is also a MooTools book you can buy. Criticizing us for a lack of documentation on 3rd party widgets isn’t exactly fair.

Hello David, thanks for the tutorial as it came in very handy, but i noticed the jQuery.noConflict(); works fine with IE but does not work will mozilla ff, safari even chrome. working on a site with 2 controls that are so perfect for my site but each of ‘em is written in mootools and jquery.

What can i do to fix this bug. thanks

Thanks a lot, very useful :-)

@keif: A load of incomprehensible angry stuff came out my mouth when I read your initial post, but I figured I’d save the flame and say blandly “I quite disagree”.

Upon reflection, I admire what you are getting at. But this is the real world, and actually if you take your argument to its logical conclusion, one could reasonably suggest that to use a library *at all* is sheer laziness and if you have to rely on one then you are clearly not a web developer and should stick to painting daisies, because a real web developer wouldn’t use a bunch of redundant code when he could be custom-designing his own libraries that do only what he wants them to do and not a whole bunch of other stuff.

Which is why your comment may come across to some as, shall we say, a little puritanical.

Back in the real world, sometimes people who put systems together (be if for themselves or for clients) simply do things for the sake of convenience. And yes they satisfy the contract they were paid for, they sleep soundly at night, and the world keeps spinning.

Hey David!

Thx a lot for this example – you’re great man!

nice solution. solves the problem for me.

Can’t you do the noConflict and closure in one:


(function($){
// $
})( jQuery.noConflict() );


@keif: I agree (mostly) from a developers perspective. The problem is, unfortunately, more complex.

Take for example, Joomla. A great CMS tool that uses (among others) mootools as a JS Framework. Put in the hands of a developer, this is not a problem, but in the hands of a user or worse :) a power user… well they may need a specific pre-built tool/plugin that does not exist for mootools but does for jQuery (another amazing JS framework)… what do they do? write one themselves and risk an even worse situation of poor, unsafe coding practices almost exclusively filled with Google found code snipits… eww.

There has always been a battle of the ideal vs the practical and this is no exception. All I can say is that I really appreciate the efforts to solve problems like these with creative, innovative and elegant solutions from professionals that know the difference.

Thanks thomtom for the noconflict code.

@Qohelet: thanks for example

The man complaining about using mootools and jquery together. What gets me is that someone can say that using two libraries is not good. Even when load times are fast. I thought the whole idea of these frame works was to make things easier. I am using mootools and jquery together. I may be needing to convert it all to jquery, but I would rather it all worked and I didnt need to do this. The time spent converting the code, can be utilized in better ways. Like going to the pub or playing football, and having a life. I would rather not convert it as it gives me a headache. Obviously you set your own standards about this, but I think the word Nerd springs to mind.

Also I do know what you mean about the Nintendo site. But that is when you would see a problem and try and fix it. Most cases JQuery and mootools are fast enough. Also at the end of the day javascript is javascript. We all use bits of code we have acquired over time that is not our own. Load times are important, but to rewrite it all I dont understand. Especially when it serves its function. If I went to someone like a client and said I am going to have to rewrite your code because you are using jquery and mootools together, then they would have to cost it and it would be an expense that they didnt need. They would also ask why and what is mootools and jquery. I think they would not agree to rewrite the code, just because I feel it is the correct way of doing things. Esspecially when there isnt a problem.

hello,
I tried searching for the problem on this forum and haven’t seen anything quite similar to it so far ( i maybe wrong).
I’m new with wordpress and i have been doing some personal projects to improve my experience with it. One of my major resources if i struggle with wordpress is through forums and research and so far everything was going well until now. I added a plugin Featured COntent Gallery from iplexus to add some effects on my website. The current theme that i am using has jquery and slider javascripts. I found out that featured content gallery uses Mootool and has some compatibility issues with jquery hence my Featured content gallery does not work. Found a solution though which is to use a code jquery.noConflict() to solve the problem. But when i insert the code at the last line of my jquery script as what i had read about and got the Featured Content Gallery to work, the tabs slider now does not work (it is supposed to expand when i do a mouseover)…But when i take out the jquery.noConflict() function in my jquery script, the Featured COntent Gallery does not work and the slider this time works. Can u please take a look at my site to see what is happening? Still a newbie at this but im doing my best to learn. (http://wp.jonasandbelle.com)

Hello,

really interesting article, but i’ve got a problem, realizing it at the page I’m currently working at.
I want to integrate the superbgimage script, to resize the background fullsize. Without mootools everythings fine. But when I try the noConflict method the JQuery-Plugin doesnt work.

How do I have to integrate plugins with the noconflict-methode?

Thanks for your work on this website.
Daniel

Thank you for the reply. Exactly right on that one. What i did was to upgrade my jquery 1.2 to 1.4 and replaced all $ instances with the jQuery namespace. Still had problems with it. I was going through the codes for quite some time now and thought instead of looking for another alternative. Since there just too much going on between mootool and jquery which are not at all trivial, i looked for several plugins similar to FCG but uses jquery framework such as vslider, d13slideshow, and nextGen gallery. The first two had the same problem as FCG but was fortunate with nextGen gallery. Everything seems to be working as i wanted them to but still checking if it will not be affected if i incorporate other plugins.

Thank you for the reply. Exactly right on that one. What i did was to upgrade my jquery 1.2 to 1.4 and replaced all $ instances with the jQuery namespace. Still had problems with it. I was going through the codes for quite some time now and thought instead of looking for another alternative. Since there just too much going on between mootool and jquery which are not at all trivial, i looked for several plugins similar to FCG but uses jquery framework such as vslider, d13slideshow, and nextGen gallery. The first two had the same problem as FCG but was fortunate with nextGen gallery. Everything seems to be working as i wanted them to but still checking if it will not be affected if i incorporate other plugins.

@Daniel:

@Daniel:

@Daniel: Exactly right on that one. What i did was to upgrade my jquery 1.2 to 1.4 and replaced all $ instances with the jQuery namespace. Still had problems with it. I was going through the codes for quite some time now and thought instead of looking for another alternative. Since there just too much going on between mootool and jquery which are not at all trivial, i looked for several plugins similar to FCG but uses jquery framework such as vslider, d13slideshow, and nextGen gallery. The first two had the same problem as FCG but was fortunate with nextGen gallery. Everything seems to be working as i wanted them to but still checking if it will not be affected if i incorporate other plugins.

Wonderful article. Thanks David

Very good solution David. Its really helpful for me in joomla menu with moo tools and other functionality in Jquery.

Thanks for sharing this. I was in need of this code..

Hi David, it good to read your article, but I still got a problem here. I’m using joomla and it works fine with the jQuery.noConflict(); function when using jquery, but when I tried jquery-ui, the features from jquery-ui doesn’t work. Do you know how to fix it? Thanks

Hi David, it good to read your article, but I still got a problem here. I’m using joomla and it works fine with the jQuery.noConflict(); function when using jquery, but when I tried jquery-ui, the features from jquery-ui doesn’t work. Do you know how to fix it? Thanks a lot

my problem is a conflict with a link and the no conflict code wont wrk
if i take out this 1st script the mootools will work but with it in it wont. this is all in the header execpt the bit at the bottom which i noted
any ideas please

$(function() {
$(‘#one’).ContentSlider({
width : ’696px’,
height : ’160px’,
speed : 1300,
easing : ‘easeInOutBack’
});
});

THIS SCRIPT IS PLACED IN THE BODY

var currentCol = 0;
var columns = $$(‘div.col’);
var folioChange = new Fx.Tween(‘folio’, {duration:1000});

window.addEvent(‘domready’, function(){

$(‘prev’).addEvent(‘click’, function(){
if(currentCol>0){
currentCol -= 1;
var x = (currentCol*-301);
folioChange.start(‘left’,x);
}
});

$(‘next’).addEvent(‘click’, function(){
if(currentCol<columns.length-1){
currentCol += 1;
var x = (currentCol*-301);
folioChange.start('left',x);
}
});

});

function colJump(myCol){
var x = ((myCol-1)*-301);
folioChange.start('left',x);
}

my problem is a conflict with a link and the no conflict code wont wrk
if i take out the ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js link then the mootools will work.
any ideas how to do a no conflict in this case
thanks

Wow thanks.
A simple line of code has solved all my problems:

jQuery.noConflict();

Your a life saver!

@Aaron Newton: I don’t agree either. Different libraries are built for different purposes. Trying to only use one library for every case may more efficient in a machine-centric model, but may not be efficient at all in terms of providing a user experience or meeting development goals. Besides, what’s 50k if it gets you what you need?

I still think it’s laziness. You or your employer aren’t willing to pay the cost of writing some widget in the library you prefer, and so rather than pay that cost you make *all of your users do it*.

Definitely a great article!

Unfortunately I’ll have to use both frameworks: mootools in addition to jQuery because engine that I’m using for my project utilizes mooTools and I can’t get rid of it, there are a lots of js-code.

For now I have found mooTools absolutely inconvenient, I just can’t understand how people can use that framework in their projects. jQuery is much more simple, powerful and programmer-friendly. :)

Thanks again, David! Now I know how to make them live together. :)

Definitely a great article!

Thanks, David! Now I know how to make them live together. :)

Thank you so much this is exactly what I was looking for.

why are you getting angry with david, he just share his knowledge on how to use jquery and mootols together. now if you think using them both at the same time in a single project is not good then dont do it. does he says here the “hey!.. jQuery and Mootools can be use at the same time so lets us it at the same time.”

its a great article david..

Thanks for this article David!

I used the apostropheNow Symfony Plugin which uses jQuery UI for an existing project and replaced all my $(myId) calls from mootools with document.id(myId), which it seems to work very well – but I don’t have a longtime feedback yet. Anyone knows more about this?