Treehouse

Using jQuery and MooTools Together

By on  

There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page.

The XHTML and JavaScript

	<p>jQuery sets this paragraph's color to red but MooTools sets the border color.</p>
	<script type="text/javascript" src="jquery-1.3.js"></script>
	<script type="text/javascript">
		//no conflict jquery
		jQuery.noConflict();
		//jquery stuff
		(function($) {
			$('p').css('color','#ff0000');
		})(jQuery);
	</script>
	<script type="text/javascript" src="moo1.2.js"></script>
	<script type="text/javascript">
		//moo stuff
		window.addEvent('domready',function() {
			$$('p').setStyle('border','1px solid #fc0');
		});
	</script>

jQuery is namespaced so the $ function is free for MooTools to take hold of. The jQuery code passes jQuery to itself and then we call the argument $, thus jQuery is contained, so to speak.

Obviously including two libraries within the same page is resource-consuming but if it's acceptable to the project and allows you to implement plugins from each library quickly, this may be a great option for you.

ydkjs-6.png

Recent Features

  • Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event,...

  • Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

Discussion

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

  2. 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.

    • Izzy

      Ho hum TLDR. Yet another code monkey who doesn’t get “business”.

    • Mickey

      Very well answered, but what if there are other libraries that rely on jQuery ?
      And other libraries that rely on MooTools ? You just won’t rewrite them all, will you ?

    • Capcaunu

      Sometimes you don’t have the time/budget to rewrite code. Simple as that. Then what do you do? Tell the client you’re incapable of delivering?

  3. cssProdigy

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

  4. 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.

    • Alex

      Multi devs = multi lib.

    • Izzy

      Exactly. Not enough money, time or resources = multi lib.

    • MArk

      Precisely, multi-dev teams often utilise different libraries. It’s not always feabile in a real-world situation to be so anal about it.

  5. @keif: I don’t necessarily agree. As long as components work well and the page loads quick enough, using multiple frameworks is fine. If the two frameworks conflict, then obviously they shouldn’t be used together.

  6. I’d like to add one more thing. In a perfect world, you’d port everything to one framework. For someone like myself that’s responsible for over 100 websites and is allotted only a certain amount of time be project, porting plugins isn’t usually an option.

  7. 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.

  8. @keif: As a fan of the wii, I must ask that you never insult Nintendo again. :) Thank you for providing a solid real-life example.

  9. 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.”

  10. @keif: Did you get a response?

  11. I wish. I never received a follow-up.

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

  12. thomtom

    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');
    
  13. Ibrahim

    @thomtom
    To change jQuery reference you should write like this: var JQ = jQuery.noConflict(true);

  14. thomtom

    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();

  15. Ibrahim

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

  16. thomtom

    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 :

  17. You must be some sort of voodoo wizard monster

  18. @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…

  19. @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.

  20. Ashley

    Why do they both use $?

  21. @Ashley: They’re both scoped differently. MooTools gets the global namespace while jQuery gets if’s own namespace. Fun, huh?

  22. Ashley

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

  23. Grzegorz Margol

    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?

  24. nuxusr

    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.

  25. timolee

    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.

  26. @Timolee: I don’t feel it’s for good reason; many persons have learned MooTools on their own by plugging away, plugging away, plugging away. My opinion is that the MooTools documentation is much cleaner and easier to navigate than jQuery’s. The #mootools IRC channel is very active. Aaron Newton’s MooTorial (http://www.mootorial.com/) is the Bible of learning MooTools. You can also ask questions on the Google Group (http://groups.google.com/group/mootools-users/).

    There are plenty of ways to learn MooTools. You clearly haven’t used all avenues.

    • Izzy

      Thank you for posting these resources. I had the same general impression as Timolee. (Ppl still chat on IRC!? Crikey!)

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

  28. Sammy

    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

  29. Thanks a lot, very useful :-)

  30. Mat

    @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.

  31. Hey David!

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

  32. nice solution. solves the problem for me.

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

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

    @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.

  35. saket jha

    Thanks thomtom for the noconflict code.

  36. vengenec

    @Qohelet: thanks for example

  37. 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.

  38. 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.

  39. 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)

  40. Daniel

    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

  41. 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.

  42. 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:

  43. @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.

  44. Wonderful article. Thanks David

  45. Yogesh Patil

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

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

  47. Kelvin

    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

  48. Kelvin

    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

  49. pierce

    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

  50. Wow thanks. A simple line of code has solved all my problems: jQuery.noConflict(); Your a life saver!

  51. @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?

  52. 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*.

  53. Alexey

    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. :)

  54. Alexey

    Definitely a great article!

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

  55. Tsam

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

  56. 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..

  57. 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?

  58. Ryan

    Very helpful thanks

  59. naisss i will try tonight thx walsh…..:))

  60. vignesh

    Actually there is more elegant and easier way to use $ without overwriting all you $()’s to jQuery(). You need to put your javascript code in closure like it’s explained in this post about jQuery.noConflict():

    function($){
      // here comes the code that uses $
    }(jQuery);
    

    i now this post is old i have no new information’s but i try jQuery in NO CONFLICT mode in second method…

    jQuery(document).ready(function($){
        $("div").hide();
    });
    
  61. Thanks for sharing this file

    Now i can add this

  62. amiin

    this great mate, i have been struggling with for a while ,

    Thanks
    M.Amin

  63. Very Nice website. I just finished mine and i was looking for some ideas and your website gave me some. The website was developed by you? Thanks!

  64. Oh boy, thank you for this! You saved me! :D

  65. Excellent work. Wish I had found this an hour ago.

  66. It’s not bad to use two different components together. As long as maintenance won’t be a living hell, mixing JQuery+MooTools in certain situations should be OK. Each framework has its strength, it’s possible to leverage those strengths together when a situation calls for it.

  67. It’s worth mentioning to those finding this page that MooTools has been updated (as I’m sure David knows, as he wrote the post for it) to create framework compatibility.

    http://mootools.net/blog/2009/06/19/mootools-123-released/

    Thanks, David. YTMND!

  68. Its ALL Javascript, whether you mix them or not. The users and clients don’t give a damn what you use, just as long as it works. So make it happen and make some money!! :). The fact that you know how to use the different tools to make something happen is what makes you a better developer in general.

  69. can any one please help me out with the following, i have googled alot but i dont know how to solve this problem, problem is when i remove the mootool file the from slideshow A slide show B start working, and when i remove jquery file from slideshow B slideshow A start working, this can be sloved by juery.noconflict(); i have tried be its not working, please help…

    Slide show A:

    <script type="text/javascript" src="_mootools.js">
    <script type="text/javascript" src="_class.noobSlide-new.js">
    
    window.addEvent('domready',function()
    {
    	//SAMPLE 7
    	var startItem = 0; //or   0   or any
    	var thumbs_mask = $('thumbs-mask').setStyle('left',(startItem*62-568)+'px').setOpacity(0.8);
    	var fxOptions7 = {duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
    	var thumbsFx = new Fx.Style(thumbs_mask,'left',fxOptions7);
    	var hs7 = new noobSlide(
    	{
    		box: $('main-slide-box'),
    		items: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],
    		handles: $ES('span','thumbs-handle'),
    		fxOptions: fxOptions7,
    		autoPlay: true,
    		onWalk: function(currentItem)
    			{
    			thumbsFx.start(currentItem*62-568);
    			},
    		startItem: startItem
    	});
    	hs7.walk(0);
    });
    

    Slide Show B:

    <link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css">
    <script type="text/javascript" src="jquery-1.6.2.min.js">
    <script type="text/javascript" src="jquery.ad-gallery.js">
    
    $(function() {
    	var galleries = $('.ad-gallery').adGallery();
    });
    
  70. Gawd

    @keif, @david – COULDN’T BE MORE WRONG!

    This “code everything in one framework”–The One Great Truth–uber-framework–platform bigotry– notion you (and many others) have is utterly, totally, and completely wrong.

    –I’m about to lose friends here, but so be it:

    jQuery is bloatware. MooTools is bloatware. Read the APIs. Those things (capabilities) have nothing to do with eachother! Ajax and Animation do NOT belong in the same file!

    The reason people capitulate and load multiple frameworks is because: “frameworks”, as they are written today, truly shouldn’t exist! Any given page should be built up using individual lightweight libraries which provide simple, well-defined classes of functionality.

    I will not use either of the aformentioned frameworks without substantial financial coercion UNTIL they are divided up into modules providing sensible separation of functionality.

    Case in point: Think Sizzle. Sizzle does one thing and does it well. 98% of what jQuery claims to do, is really done by Sizzle. In most cases one can simply use Sizzle and forgo jQuery alltogether.

    • Daquan Wright

      But companies are now hiring for jQuery knowledge, not Sizzle. :P

  71. @Gawd…So Sizzle is what you load instead of JQuery or Mootools. Whether you load Sizzle, jQuery or Mootools, you are still depending on a pre-built clump of code that you didn’t write to help you build something.

    In the end, “who cares”. The clients and users DON’T care NOR give a crap how or what you used. Even if you explained it to them, they still would be clueless. They only want to know that it works. They just want the “experience”. If you use jQuery, Mootools, Sizzle or ALL three to get something to work in a few hours (verses a few weeks), whats the issue? You have saved time, money, and the clients are Happy. Happy clients mean returning clients. What would suck would be for you to stay a “purist”, spend hours and hours doing it your “right” way and for the clients ( who have had to put up with your “purist” ways) to find something not working and blame you because you are slow and take forever.

    Take it from me, I was once a programming purist( And still am in some cases ) :)

  72. Hi,
    If you are using both libraries and you have some library autoloading script. Make sure you load Mootools BEFORE jQuery! Then you can call jQuery.noConflict() anywhere (down) in the source. If you load jQuery first, Mootools won`t work.

  73. You can load Mootools and jQuery.

    1. Load jQuery
    2. Add the noConflict line of code.
    3. Load MooTools

    After that you will use $ for MooTools and jQuery for jQuery.

  74. This is Brilliant! Thanks David!

  75. Clive Galway

    Hmm, useful, but does not seem to fully do the trick for me.

    For example, if you take the excellent “Color Wheel” ( http://jweir.github.com/colorwheel/ ) and try to embed one of those into a mootools page, it doesn’t work (error: “$(“#input_example .colorwheel”) is null”) – you have to go into the js file and replace $( with jQuery(.

    However, this method is clearly doing something good as without this technique I cannot get the jquery color wheel to load in my mootools app at all.

    Anyone got any ideas?

    PS Thanks for a great site David! Many of your articles have helped me out.

  76. Hello Sir,

    I am in great trouble please retrieve me in this trouble .

    1) I have used T3 Framework in joomla 1.7 version
    2) I have html template in which put in T3 framework .

    Problems:-

    1) Mootools or Jquery is still conflicting in my website please tell me how to resolve this problem .

    I hope u would be help me?

    and Important thing i have used also 2 plugins scjquery sysytem plugin and jquery-easy plugin .

  77. Hello Sir,

    I am in great trouble please retrieve me in this trouble .

    1) I have used T3 Framework in joomla 1.7 version
    2) I have html template in which put in T3 framework .

    Problems:-

    1) Mootools or Jquery is still conflicting in my website please tell me how to resolve this problem .

    I hope u would be help me?

    and Important thing i have used also 2 plugins scjquery sysytem plugin and jquery-easy plugin .

  78. onaxis

    thank you for the clean code

    after spending some time going through many web pages trying to get the no-conflic to work, your example really helped

    thanks again

  79. i want this efect http://cssglobe.com/lab/tooltip/03/
    how i can to do

  80. Topic very nice, thank you.
    i wan share code support here :

         jQuery.noConflict();
         
         // Use jQuery via jQuery(...)
         jQuery(document).ready(function(){
           jQuery("div").hide();
         });
         
         // Use Prototype with $(...), etc.
         $('someid').hide();
       
    
    or :
    
     
         var $j = jQuery.noConflict();
         
         // Use jQuery via $j(...)
         $j(document).ready(function(){
           $j("div").hide();
         });
         
         // Use Prototype with $(...), etc.
         $('someid').hide();
    

    You take the link : http://docs.jquery.com/Using_jQuery_with_Other_Libraries

  81. […] page. Here’s a very good article from David Walsh on how to use jQuery and Mootools together: Using jQuery and MooTools Together Always remember to include your scripts after your html, preferably after the body tag as mentioned […]

  82. oh! i can fixed! thanks ! you can see it at http://elive.vn/fix-mootool-jquery.html

  83. hi

    This is my link

    Here i have used for vertical slide down menu and right side in featured products I have used

    Where both get clashed..

    If i comment jquery-1.4.4.js means right side works fine neither mootools.js are commented vertical slider works fine..

    I want both to work fine..please give me a solution as soon as possible

  84. ashwini

    hi

    This is my link http://www.peacockbrand.in/demo/version1

    Here i have used for vertical slide down menu and right side in featured products I have used

    Where both get clashed..

    If i comment jquery-1.4.4.js means right side works fine neither mootools.js are commented vertical slider works fine..

    I want both to work fine..please give me a solution as soon as possible

  85. I would advise against using both of these libraries together as it will increase your load times on your pages. This should only be a last resort if you cannot convert what you want over from either library.

    Having both of these libraries together would be great and all, but I don’t think the extra time load is worth it most of the time. Always a trade off I guess.

  86. I noticed a number of comments above as being critical of combining MooTools and jQuery in some cases even name calling engineers that would do such a thing. For those commentators I offer a problem and ask kindly for your “genius” solution.

    Problem Statement:
    The owner of a multimillion-dollar web application (which uses MooTools exclusively), having seen jQuery UI decides prefers to standardize future UI design around jQuery UI components.

    You as the developer have the following general options. Please choose one.
    a. Tell the owner it’s impossible because we already use MooTools.
    b. Tell the owner we can do it, but we have to refactor the entire application (10 years of coding) to use jQuery first.
    c. Develop jQuery only layouts and only use jQuery UI for new features.
    d. Rebuild all of jQuery UI in MooTools.
    e. Or… simply include jQuery in your exiting layouts. Call jQuery.noConflict(). Create enclosures around jQuery code.

    True engineers develop solutions, sometimes those solutions are less than ideal, but sometimes ideal is less than practical.

  87. var dat = $(this).data();
    (function ($){
    var methods = {
         'do_stuff':function (){
            if(window.console){
                console.log(this);
            }
        }
    };
    $.fn.callmethod=function (method){
       if(methods['method']){
           return methods['method'].apply(this,Arry.prototype.slice.call(arguments,1));
       }
    };
    })(jQuery)
    $(document).ready(function (){
        dat.elms{
          'some-elm': $('div.some_div')
       }
      dat.elms.some-elm.callmethod('do_stuff');
    });

    Does this not prototype my jQuery methods?? Anyways, I am sick of seeing people use php frame works that handle js libraries for them. Too many times I have seen jQuery , mootools , prototype and others on a single site. What the heck is that?! The goal is speed not and functionality. NOT, functionality at any cost. Why load an ass load of script libraries for 1% of it’s core? I say , ‘if you want to impress people with code, learn to write it first.’ . I can understand if you enjoy using two libraries but would it not be better to have a single js file for the entire site. Also, avoid embeded scripts lines in your html. I like what Keif said back in ’09. One library should be used and if you want to change it up , you would only simulate what you did with the last library you used + what ever made you change.

  88. bluesnag

    Thanks so much for the example. This saved me a lot of time and was a quick fix to an issue.

  89. Thanks a lot for your kind help, I am working with social engine, which have mootools rather than jquery, I wanted to implement jquery at many places, fianlly get rid of issue. Thanks a again. Please keep posting.

  90. Hello I am working on social engine.In that "mootools-more-1.4.0.1-full-compat-nc.js" is used and then i used i jquery library's 
    "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" for html5 video player for implementing the skin of codecanyon (giant skin).
    
    I first write Mootool library then include library in script and also used jQ=jQuery.noConflict(); but still there is confliction between them.if i remove mootool script then player works fine but other functionality got disturbed.
    
    any solution for this please..need help urgently..
    
    Thanxxx
    
    
  91. Ohhhh God

    Thank you very much!!!
    You save my live! ;)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!