This is a message.

How do I use TOOLS/jQuery no conflict mode ? Created Jun 17, 2009

This thread is solved

Views: 15545     Replies: 14     Last reply Mar 3, 2011  
You must login first before you can use this feature

Bowromir

Posts: 8

Registered:
Jun 10, 2009

How do I use TOOLS/jQuery no conflict mode ?

Posted: Jun 17, 2009

Hi Everyone,

I am trying to use quite a few Tools scripts on my website, but I use a social network script that uses MooTools and quite a few other JS as well.. I've included tools into my header AFTER all the other scripts, because if I include it before them, TOOLS doesnt work at all..

So when I include tools after the rest I seem to be running into errors with menu's not displaying and MooTools tooltips not showing up. So I need to modify my TOOLS JS so it won't cause conflicts.. Now I've looked on the internet and saw that I need to include:

var J = jQuery.noConflict();

In my JS to change the $ into J and won't cause problems with other JS.. So the next step I did was to replace all the "$" for "J"..

But do I need to do this for the entire Tools script? Do I need to edit jquery.tools.js and do the replacements, or can I just edit the javascript on the page itself like this:


// perform JavaScript after the document is scriptable. 
var J = jQuery.noConflict();
J(function() { 
    // setup ul.tabs to work as tabs for each div directly under div.panes 
    J("ul.tabs").tabs("div.panes > div"); 
});

I tried the above, and the Tools javascript keeps working, but it doesnt solve the conflict issues on my site.. I am a total n00b in javascript so some help would be great!

Thanks in advance :)

Bowromir

Posts: 8

Registered:
Jun 10, 2009

» How do I use TOOLS/jQuery no conflict mode ?

Posted: Jun 20, 2009

Reply to: How do I use TOOLS/jQuery no conflict mode ?, from Bowromir
Can anyone help me with this?

ianebden

Posts: 3

Registered:
Aug 5, 2009

» » How do I use TOOLS/jQuery no conflict mode ?

Posted: Aug 5, 2009

Reply to: » How do I use TOOLS/jQuery no conflict mode ?, from Bowromir
Did you ever get this fixed? I'm having similar probs and I'm a newbie too!

Bowromir

Posts: 8

Registered:
Jun 10, 2009

» » » How do I use TOOLS/jQuery no conflict mode ?

Posted: Aug 5, 2009

Reply to: » » How do I use TOOLS/jQuery no conflict mode ?, from ianebden
No I have not.. If someone could shed some light on this issue it would be awesome!

ianebden

Posts: 3

Registered:
Aug 5, 2009

» » » » How do I use TOOLS/jQuery no conflict mode ?

Posted: Aug 5, 2009

Reply to: » » » How do I use TOOLS/jQuery no conflict mode ?, from Bowromir
I think the answer lies somewhere here:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

But I'm still struggling. Will let you know if I get anywhere.

mrrcollins81

Posts: 9

Registered:
Jan 23, 2010

Same problem...

Posted: Jan 23, 2010

Reply to: » » » » How do I use TOOLS/jQuery no conflict mode ?, from ianebden
Ok so my mouth was watering, I fell in love with jQueryTools and I decided to implement it on the sites I'm working on. Only problem is we need to be in no conflict mode for the same reasons as everyone else (multiple libraries).

I tried to run tools locally and was amazed at how easy it was to implement...Then I tried on my Dev. sites and its a total no go. There has to be a way to run tools in no conflict mode, come on plaese someone body help!!! =) I don't wanna go back to jQuery UI.... Ever...

What i did to get lightbox to work is go through the script and piece by piece replace all the $ with $j and it worked... I guess i'll try it with Tools and see what happens ... That'll be fun with a minified file.

mrrcollins81

Posts: 9

Registered:
Jan 23, 2010

A solution (so far so good)

Posted: Jan 23, 2010

Reply to: How do I use TOOLS/jQuery no conflict mode ?, from Bowromir
Ok so what I did (and so far it works with no issues) is I just replaced my copy of jQuery with their copy which includes jQuery and jQuery tools. Then I ran (or rather continued to run) jQuery in no conflict mode... 

 var $j = jQuery.noConflict();

Somewhere in your header or near where you call jQuery.

So far it seems all my scripts are working. I got jQueryTools tooltips to work and I checked other scripts i am using like lightbox and regular jQuery scripts and they are all working. So far so good. I'll let you know if anything changes.

Hope this helps others...

spirithero

Posts: 3

Registered:
Mar 15, 2010

it still didn"t work

Posted: Mar 15, 2010

Reply to: A solution (so far so good), from mrrcollins81
i used your solution but it still didn't work.
i used the asycom menu and some other plugins.

Dave

Posts: 1

Registered:
Jul 21, 2010

Working and loving it!

Posted: Jul 21, 2010

Reply to: A solution (so far so good), from mrrcollins81
Thanks to @MrrCollins81 for his last two posts. Thanks to those, I was able to get things working. Below is the only section of code that I had to edit. There was nothing that I needed to do to any of the libraries, but this was just my example.

I was using MooTools and jQuery. More specifically, I was usingMenuMatic (MooTools ) and Kwicks (jQuery).

After reading a variety of instructions from all over the damn place, this was all I had to do.
Add this line to the code that was going to activate Kwicks . 

var $j = jQuery.noConflict();

And then below that, I just had to change the default $'s to $j's, and that was it. Loaded the test page and it was working great! 


$j().ready(function() {
$j('#avconslide .kwicks').kwicks({
max: 506,
spacing:  0
});
});

I was clearly trying to make this more complicated than it needed to be, which is my fault of course. I just wish that there were more places online that spelled it out this way.


<head>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j().ready(function() {
$j('#avconslide .kwicks').kwicks({
max: 506,
spacing:  0
});
});
</script>

<!-- Load the Mootools Framework -->
<script src="js/mootools-yui-compressed.js" type="text/javascript"></script>
<!-- Load the MenuMatic Class -->
<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
window.addEvent('domready', function() {			
var myMenu = new MenuMatic();
});	
</script>
</head>

I imagine that the jQuery needs to be running first, or this probably wont work. They mentioned that on several sites, so make sure that you keep that in mind. Good luck!

mushacles

Posts: 1

Registered:
Nov 1, 2010

Thank You!

Posted: Nov 1, 2010

Reply to: Working and loving it!, from dnev
I've been trawling the internet all day looking for this solution and this is the clearest response I've found. Thank you very very much. Worked a charm (and prevented my head from exploding, which is never nice ;-))

pszpak

Posts: 2

Registered:
Nov 25, 2010

Cheers

Posted: Nov 25, 2010

Reply to: Thank You! , from mushacles
Worked for me, too. Thanks a lot.

ktweezee

Posts: 2

Registered:
Nov 24, 2010

thanks a bunch

Posted: Nov 30, 2010

Reply to: Working and loving it!, from dnev
I've been struggling on this for a couple of days. Your post really helped out.

thanks for sharing

iron

Posts: 7

Registered:
Feb 28, 2011

Please help. I have been struggling with this for weeks.

Posted: Mar 3, 2011

Reply to: Working and loving it!, from dnev
when I put flowplayer and lightbox in the same page, the only working one is lightbox. If i removed the "prototype.js", Flowplayer worked fine. I know some of you guys have faced with this problem and solved it, but I couldn't be able to figure out how to use var( $j = jQuery.noConflict();). here is the stuff that I put in htmlpage



 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	
	<!-- all jQuery Tools -->
<script src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.player.js"></script>
	 

<!-- all lightbox Stuff -->
	
	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>

	<style type="text/css">
		body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;	}
	</style>

</head>
<body>

<style>
.overlay {
	padding:40px;	
	width:576px;  
	display:none;
	background-image:url(http://static.flowplayer.org/img/overlay/white.png);	
}

.close {
	background:url(http://static.flowplayer.org/img/overlay/close.png) no-repeat;
	position:absolute;
	top:2px;
	right:5px; 
	display:block;
	width:35px;
	height:35px;
	cursor:pointer;
}

#player {
	height:450px;
	display:block;
}
</style>

<!-- button that opens up overlay -->
<p>
	<button href="#" rel="div.overlay">Open overlayed video</button>
</p>

<!-- element that is overlayed, visuals are done with external CSS -->
<div class="overlay" style="background-image:url('http://flowplayer.org/img/overlay/white.png')">

	<!-- flowplayer container -->
	<a id="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
	
		<!-- some initial content so that player is not loaded upon page load -->
		 
	</a>
</div>

<script>

$(function() {

	// install flowplayer into flowplayer container
	var player = $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.6.swf");
	
	// setup button action. it will fire our overlay 
	$("button[rel]").overlay({
		
		// use the Apple effect for overlay
		effect: 'apple',
		
		// when overlay is opened, load our player
		onLoad: function() {
			player.load();
		},
		
		// when overlay is closed, unload our player
		onClose: function() {
			player.unload();
		}
	});
			
});
</script>

<h1><a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox JS <em>v2.04</em></a></h1>

<h2>Example</h2>

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

</body>
</html>

I uploaded the source code in zipped file so you can download it from this link
http://intelligentps2.limewebs.com/JS_CONFLICT.zip

This problem realy made me headache. After searching solutions for almost a month, I've decided to give up. If anyone can help me out, I would really really .... appreciate that.

Thanks in advance!

vrnet

Posts: 3

Registered:
Oct 31, 2009

My 2 cents

Posted: Feb 3, 2011

Reply to: How do I use TOOLS/jQuery no conflict mode ?, from Bowromir
I just figured out that the call to jQuery Tools works if and only if it is called before the var $j = jQuery.noConflict();

Basically, with CDN calls :

<script type="text/javascript" src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src=http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<script type="text/javascript">
// var $j = jQuery.noConflict();
//]]>
</script>

For Magento users, this works perfectly for me.