JQuery - Mootools conflict, what to do?

Discussion in 'Web Design and Development' started by sk3pt1c, Feb 15, 2010.

  1. sk3pt1c macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #1
    hello guys and dolls :)
    so i have a navigation menu using mootools to fade in and out on hover
    and on the same page i have some thumbnails that show text on hover using jquery. the thing is that the menu works but the thumbnails don't...
    if i don't call the mootools library the thumbnails work, so it's a conflict between the two...
    any ideas?
    thank you!
     
  2. memco macrumors 6502

    Joined:
    May 1, 2008
    #2
    Post the code or a link to the page so we can see it in action and we should be able to help.
     
  3. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #3
    here's the code, i tried adding a jQuery.noConflict(); to the bit that's calling jquery but it didn't help...
    thank you in advance for your time! :)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Giannoulas Kosmopoulos - Law Offices</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="navStyle.css" rel="stylesheet" type="text/css" />
    <link href="indexThumbsEffect/ThumbEffectStyle.css" rel="stylesheet" type="text/css" />
    [B]<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js'></script>[/B]
    <script type="text/javascript" src="indexThumbsEffect/imagezoom.js"></script>
    [B]<script type="text/javascript" src="jquery-1.2.2.pack.js" ></script>[/B]
    <!-- navbar animation -->
    <script type="text/javascript">
    	$(function() {
    		// set opacity to nill on page load
    		$("ul#menu span").css("opacity","0");
    		// on mouse over
    		$("ul#menu span").hover(function () {
    			// animate opacity to full
    			$(this).stop().animate({
    				opacity: 1
    			}, "slow");
    		},
    		// on mouse out
    		function () {
    			// animate opacity to nill
    			$(this).stop().animate({
    				opacity: 0
    			}, "slow");
    		});
    	});
    </script>
    <!-- thumbnails animation -->
    <script>
    window.addEvent('domready',function(e){
    initImageZoom();
    $$('div.sections-overlay').each(function(div){
    	div.set('opacity',0);
    	div.set('morph', {duration:'1000'});
    })
    $$('div.thumbnail-div').each(function(div){
    	div.set('tween', {duration: '450'});
    	div.addEvents({
    		'mouseenter': function(){
    			$(this).tween('marginTop', '-10px');
    			$(this).getElements('div.sections-overlay').each(function(d){
    				d.morph({opacity: 1, backgroundPosition: "-40px 0px"});
    			});
    		},
    		'mouseleave': function(){
    			$(this).tween('marginTop', '0px');
    			$(this).getElements('div.sections-overlay').each(function(d){
    				d.morph({opacity: 0, backgroundPosition: "0px -167px"});
    			});
    		}
    	});
    
    });
    });
    </script><!--end script for thumbsEffect-->
    </head>
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Try putting the jQuery line before the MooTools one. These 2 libraries often have conflicts like this.
     
  5. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
  6. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #6
    i think you're just not using it right.

    According to the documentation, when you use the noConflict function, you're supposed to either

    1. replace the $ normally used with jquery with the words "jQuery"

    2. write all your jquery related code in a document.ready function before moving on to using other libraries.

    jQuery(document).ready(function(){
    $("div").hide();
    });

    3. or associate the no conflict function with a variable like so
    var $j = jQuery.noConflict();

    // Use jQuery via $j(...)
    $j(document).ready(function(){
    $j("div").hide();
    });

    I dont' see any of that

    http://docs.jquery.com/Using_jQuery_with_Other_Libraries


    Also, it'd be helpful if you edited your code a bit so that those of us not familiar with mooTools could see which section is supposed to use which library

    PS. I might be wrong, but after looking over all your code so far, it looks like everything you want to accomplish could easily be done with just jQuery, it might be worth looking into to make things a bit easier.
     
  7. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #7
    thanks my friend

    i tried all three methods and nothing seems to work, for some reason... :(

    i'm not that great at javascript, these are tidbits i've picked up and tried to modify for use in this site... so... i wouldn't know where to begin to do what you said in your post scriptum :/
     
  8. Melrose Suspended

    Melrose

    Joined:
    Dec 12, 2007
    #8
    Both libraries have almost boundless how-tos and tutorials. Granted MooTools seems to have better animation, but really they're not that different. Navigation fx are very common and not that complicated to script.

    It's not possible to use one library for both effects? This would also reduce load time.
     
  9. astroot macrumors regular

    Joined:
    Nov 12, 2009
    #9
    First thing I would recommend doing is using the Google hosted jQuery instead of your own. You're already doing that with MooTools, so why not do it with jQuery? That way people won't have to re-download the jQuery file if they have it cached from all of the other websites that use jQuery. The link is:
    HTML:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    Second thing I would recommend doing is reading David Walsh's post about the subject. Find it here: http://davidwalsh.name/jquery-mootools

    That should make your stuff work, although you may wish to read his follow up post if it doesn't.

    The third thing I would recommend doing is looking for a jQuery plugin that does the same thing, thus eliminating the need for MooTools.

    And the fourth and final thing I'd do is run your code through jslint.com. Your MooTools code has an error on line 6, a missing semicolon after the })

    Good luck.
     
  10. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #10
    thank you for all the input, turns out it's ok getting local versions of the libraries, i swapped the code around so i'm calling the jQuery library and running the code first, then calling mootools and running its code, like this:
    Code:
    <script type="text/javascript" src="jquery-1.2.2.pack.js" ></script>
    
    <!-- navbar animation -->
    <script type="text/javascript">
    	jQuery.noConflict();
    	jQuery(function() {
    		// set opacity to nill on page load
    		jQuery("ul#menu span").css("opacity","0");
    		// on mouse over
    		jQuery("ul#menu span").hover(function () {
    			// animate opacity to full
    			jQuery(this).stop().animate({
    				opacity: 1
    			}, "slow");
    		},
    		// on mouse out
    		function () {
    			// animate opacity to nill
    			jQuery(this).stop().animate({
    				opacity: 0
    			}, "slow");
    		});
    	});
    </script>
    <script type='text/javascript' src='mootools-1.2.4-core-yc.js'></script>
    <script type="text/javascript" src="indexThumbsEffect/imagezoom.js"></script>
    <!-- thumbnails animation -->
    <script>
    window.addEvent('domready',function(e){
    initImageZoom();
    $$('div.sections-overlay').each(function(div){
    	div.set('opacity',0);
    	div.set('morph', {duration:'1000'});
    })[COLOR="red"][B];[/B][/COLOR] [COLOR="Red"](<-- thanks for spotting this)[/COLOR]
    $$('div.thumbnail-div').each(function(div){
    	div.set('tween', {duration: '450'});
    	div.addEvents({
    		'mouseenter': function(){
    			$(this).tween('marginTop', '-10px');
    			$(this).getElements('div.sections-overlay').each(function(d){
    				d.morph({opacity: 1, backgroundPosition: "-40px 0px"});
    			});
    		},
    		'mouseleave': function(){
    			$(this).tween('marginTop', '0px');
    			$(this).getElements('div.sections-overlay').each(function(d){
    				d.morph({opacity: 0, backgroundPosition: "0px -167px"});
    			});
    		}
    	});
    
    });
    });
    </script><!--end script for thumbsEffect-->
    it works fine like this :)

    thank you all again for the help and the chance to learn more stuff about our common interest :)
     
  11. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #11
    i knew this wouldn't be the end of things...
    i decided to add an RSS feed reader to one side of the page so it's like this:
    Code:
    <script type="text/javascript" src="jquery-1.2.2.pack.js" ></script>
    <!-- navbar animation -->
    <script type="text/javascript">
    	jQuery.noConflict();
    	jQuery(function() {
    		// set opacity to nill on page load
    		jQuery("ul#menu span").css("opacity","0");
    		// on mouse over
    		jQuery("ul#menu span").hover(function () {
    			// animate opacity to full
    			jQuery(this).stop().animate( {opacity: 1}, "slow");
    												},
    		// on mouse out
    		function () {
    			// animate opacity to nill
    			jQuery(this).stop().animate( {opacity: 0}, "slow");
    					});
    	});
    </script>
    <script type='text/javascript' src='mootools-1.2.4-core-yc.js'></script>
    <script type="text/javascript" src="thumbsEffect/imagezoom.js"></script>
    <!-- thumbnails animation -->
    <script type="text/javascript">
    window.addEvent('domready',function(e){
    initImageZoom();
    $$('div.sections-overlay').each(function(div){
    	div.set('opacity',0);
    	div.set('morph', {duration:'1000'});
    });
    $$('div.thumbnail-div').each(function(div){
    	div.set('tween', {duration: '450'});
    	div.addEvents({
    		'mouseenter': function(){
    			$(this).tween('marginTop', '-10px');
    			$(this).getElements('div.sections-overlay').each(function(d){
    				d.morph({opacity: 1, backgroundPosition: "-40px 0px"});
    			});
    		},
    		'mouseleave': function(){
    			$(this).tween('marginTop', '0px');
    			$(this).getElements('div.sections-overlay').each(function(d){
    				d.morph({opacity: 0, backgroundPosition: "0px -167px"});
    			});
    		}
    	});
    
    });
    });
    </script><!--end script for thumbsEffect-->
    <script type="text/javascript" src="feedreader/jquery.min.js"></script>
    <script type="text/javascript" src="feedreader/script.js"></script>
    the thing is that the feed reader is calling a version of jquery that's newer than the one used in the navigation menu, so if i call just one or the other, just one of the two will work
    if i call both like i'm doing, it's coming up with the usual mootools conflict again :(
    i tried calling the feedreader scripts before the mootools stuff but it still doesn't work...
    any thoughts?
     
  12. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #12
    ok, so the issue is basically here:

    Code:
    <script type="text/javascript" src="jquery.min.js" ></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
    if i call just the local or remote library the feedreader doesn't work, but the navigation and thumbnails animation does

    if i call them both then both the feedreader and navigation work, but the thumbnails (mootools) don't...

    aaaaaaaa this is insane! :( :( :(

    ps: is there something wrong with the syntax of this function:
    Code:
    function formatString(str)
    {
    	/* This function was taken from our Twitter Ticker tutorial - http://tutorialzine.com/2009/10/jquery-twitter-ticker/ */
    	str = str.replace(/<[^>]+>/ig,'');
    	str=' '+str;
    	str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
    	return str;
    }
     
  13. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #13
    Did you try just using the newer version of jquery for all the jquery stuff on the page? It doesn't look like theres a reason to use both versions.

    And again, like me and others have suggested, it looks like everything you want to do can easily be done with just one library, might be worth looking into that.
     
  14. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #14
    i did and it doesn't work, i have no idea why both have to be called for the feedreader to work...

    as far as using jquery for the thumbnail effect too, i really wouldn't know where to begin... :/
     
  15. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #15
    Well I don't know mooTools at all, but if I'm reading your code correctly, it looks like your trying to have section with more content appear the moment the mouse roll overs something?

    I think its more commonly referred to as a tooltip.

    just google/bing "jquery tooltips"
     
  16. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #16
  17. astroot macrumors regular

    Joined:
    Nov 12, 2009
    #17
    Do not call the jQuery library twice. You are currently doing this (jquery-1.2.2.pack.js and feedreader/jquery.min.js).

    Like I said, you should call the Google hosted version of jQuery at the very top. Next should be the navbar animation. Then call feedreader/script.js. Then call all of your MooTools stuff.

    Hopefully that will work. If not, I'd have to look in to it more.

    So the MooTools effect is a little bit of an enhanced Lightbox it looks like. I would imagine there's a jQuery version. I don't know of one off hand, but I'll take a look for you. It is a nice effect.
     
  18. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #18
    i tried that but for some crazy reason it doesn't work :)
    if i call just the web based latest version of JQuery, my navigation works,
    there's no conflict with the mootools stuff, but the feedreader disappears :/
     
  19. astroot macrumors regular

    Joined:
    Nov 12, 2009
    #19
    Where did you get the feedreader plugin from?
     
  20. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #20
  21. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #21
  22. astroot macrumors regular

    Joined:
    Nov 12, 2009
    #22
    You might try editing your feedreader/script.js file and replacing all of the $ with jQuery.
     
  23. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #23
    yeah, i tried that too :)
    i don't think that file is causing the conflict, i think it's the actual calling of both libraries :/
    but yeah, i won't need to use them in conjunction now so it's ok...
    but still, it's weird...
     

Share This Page