Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

JQuery - Mootools conflict, what to do?

sk3pt1c

sk3pt1c

macrumors 6502a
Original poster
Nov 29, 2005
918
6
a simulacrum
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!
 
M

memco

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

sk3pt1c

macrumors 6502a
Original poster
Nov 29, 2005
918
6
a simulacrum
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>
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
Try putting the jQuery line before the MooTools one. These 2 libraries often have conflicts like this.
 
R

Ride9650

macrumors 6502
Jun 29, 2007
352
0
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.
 
sk3pt1c

sk3pt1c

macrumors 6502a
Original poster
Nov 29, 2005
918
6
a simulacrum
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 :/
 
Melrose

Melrose

Suspended
Dec 12, 2007
7,806
399
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.
 
A

astroot

macrumors regular
Nov 12, 2009
120
0
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.
 
sk3pt1c

sk3pt1c

macrumors 6502a
Original poster
Nov 29, 2005
918
6
a simulacrum
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 :)
 
sk3pt1c

sk3pt1c

macrumors 6502a
Original poster
Nov 29, 2005
918
6
a simulacrum
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?
 
sk3pt1c

sk3pt1c

macrumors 6502a
Original poster
Nov 29, 2005
918
6
a simulacrum
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;
}
 
R

Ride9650

macrumors 6502
Jun 29, 2007
352
0
sk3pt1c said:
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?
Click to expand...

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

sk3pt1c

macrumors 6502a
Original poster
Nov 29, 2005
918
6
a simulacrum
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... :/
 
R

Ride9650

macrumors 6502
Jun 29, 2007
352
0
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"
 
A

astroot

macrumors regular
Nov 12, 2009
120
0
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.
 
sk3pt1c

sk3pt1c

macrumors 6502a
Original poster
Nov 29, 2005
918
6
a simulacrum
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 :/
 
R

Ride9650

macrumors 6502
Jun 29, 2007
352
0
A

astroot

macrumors regular
Nov 12, 2009
120
0
You might try editing your feedreader/script.js file and replacing all of the $ with jQuery.
 
sk3pt1c

sk3pt1c

macrumors 6502a
Original poster
Nov 29, 2005
918
6
a simulacrum
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...
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom