jquery noconflict 1.4.2 and 1.6.2 help

1,613 Posts

fourroses666 Reply #1, 13 years, 5 months ago

I have 2 jquiry scripts which needs to be loaded on the same page.
When only using 1 of them they don't work both.
I need to have some kind of noconflict on it.
Below script didn't work when paste it like that.

 <script src='js/jquery-1.4.2.min.js'></script>
 <script>
    var jq142 = jQuery.noConflict();
 </script>
 <script src='js/jquery-1.6.2.min.js'></script>
 <script>
    var jq162 = jQuery.noConflict();
 </script>

This is part (first lines) of the 1.6.2 script:

$(document).ready(function() {
  $('.fancybox').fancybox();
  $('.fancybox')

This is part (first lines) of the 1.4.2 script:

var $container;
$(document).ready(	
   function() {
	$container = $("#container");
	$container.wtRotator({

I really need those 2 to work, I have tried all other versions etc.
Anyone have a clue?

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #2, 13 years, 5 months ago

Your code should look like this:

<script src='js/jquery-1.4.2.min.js'></script>
<script>
   var jq142 = jQuery.noConflict();

var $container;
$(document).ready(  
   function() {
    $container = $("#container");
    $container.wtRotator({

</script>
<script src='js/jquery-1.6.2.min.js'></script>
<script>
   var jq162 = jQuery.noConflict();
$(document).ready(function() {
  $('.fancybox').fancybox();
  $('.fancybox')
</script>

If that still doesn't work try adding true to no conflict like this:

var jq142 = jQuery.noConflict(true);

Hope that helps.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

384 Posts

eladnova Reply #3, 13 years, 5 months ago

I had same issue with fancy box. I think I resorted to a single jquery call and combined my 2 ready events. Would that work for you?

...

1,613 Posts

fourroses666 Reply #4, 13 years, 5 months ago

Thanks guys,

hope it works, need to check it out later.
Let you know if it did work!

Eladnova, how does that combinement looks like? Might want to try that too

I have a lack of js skills. :0

Evolution user, I like the back-end speed and simplicity

384 Posts

eladnova Reply #5, 13 years, 5 months ago

Basically, I had a Fancyapps modal window and a jQuery slider on the same page. The 2 individual calls were conflicting so I combined them as follows.

<!-- Add the jQuery library and my custom jQuery calls -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/assets/scripts/my-custom-jquery-calls.js"></script>

So that's a single call to the latest jQuery library in my HEAD followed by a link to a single JS file with my activate for both

Then in my "my-custom-jquery-calls.js" i grouped all my jquery scripts

// JavaScript Document
$(document).ready(function(){
    
	
// Hero Sliders on homepage
	$('.bxslider').bxSlider({
		auto: true,
		adaptiveHeight: true,
		pause: 8000
	});


// Call back button
	$(".callback").fancybox({
		maxWidth	: 510,
		maxHeight	: 510,
		fitToView	: true,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false
	});
	
	
});

Seems to work for me but again I'm no jQuery expert either. I can recommend this book by the way.
http://www.amazon.com/jQuery-Visual-QuickStart-Steven-Holzner/dp/0321647491

...