conflicting Javascripts?

Question

justinmyoung 12 Junior Poster

15 Years Ago

How do you keep multiple javascripts from interacting and effecting each other?

thanks

javascript

2 Contributors
6 Replies
98 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by justinmyoung

All 6 Replies

R0bb0b 344 Posting Shark

15 Years Ago

How do you keep multiple javascripts from interacting and effecting each other?
thanks

Ensure that your function and variable names are unique.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

justinmyoung 12 Junior Poster · Answer 1 · 2008-08-23T02:21:35+00:00

justinmyoung 12 Junior Poster

15 Years Ago

thanks, I'll have a look at that

justinmyoung 12 Junior Poster · Answer 2 · 2008-08-23T02:38:55+00:00

I'm using these two scripts, but I couldn't find a problem with conflicting variable/function names?

$(document).ready(function(){

	$("#nicemenu img.arrow").click(function(){ 
								
		$("span.head_menu").removeClass('active');
		
		submenu = $(this).parent().parent().find("div.sub_menu");
		
		if(submenu.css('display')=="block"){
			$(this).parent().removeClass("active"); 	
			submenu.hide(); 		
			$(this).attr('src','images/arrow_hover.png');									
		}else{
			$(this).parent().addClass("active"); 	
			submenu.fadeIn(); 		
			$(this).attr('src','images/arrow_select.png');	
		}
		
		$("div.sub_menu:visible").not(submenu).hide();
		$("#nicemenu img.arrow").not(this).attr('src','images/arrow.png');
						
	})
	.mouseover(function(){ $(this).attr('src','images/arrow_hover.png'); })
	.mouseout(function(){ 
		if($(this).parent().parent().find("div.sub_menu").css('display')!="block"){
			$(this).attr('src','images/arrow.png');
		}else{
			$(this).attr('src','images/arrow_select.png');
		}
	});

	$("#nicemenu span.head_menu").mouseover(function(){ $(this).addClass('over')})
								 .mouseout(function(){ $(this).removeClass('over') });
	
	$("#nicemenu div.sub_menu").mouseover(function(){ $(this).fadeIn(); })
							   .blur(function(){ 
							   		$(this).hide();
									$("span.head_menu").removeClass('active');
								});		
								
	$(document).click(function(event){ 		
			var target = $(event.target);
			if (target.parents("#nicemenu").length == 0) {				
				$("#nicemenu span.head_menu").removeClass('active');
				$("#nicemenu div.sub_menu").hide();
				$("#nicemenu img.arrow").attr('src','images/arrow.png');
			}
	});			   
							   
								   
});

and

window.addEvent('domready', function(){

	$('login').setStyle('height','auto');
	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state  

    $('toggleLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});

    $('closeLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut();
		e.stop();
	});

});

thanks

justinmyoung 12 Junior Poster · Answer 3 · 2008-08-23T08:54:15+00:00

Ok, I think I need to use jQuery.noConflict() because one of my scripts is mootools and the other jquery. Where would I put this, though?

Thanks

justinmyoung 12 Junior Poster · Answer 4 · 2008-08-23T10:03:37+00:00

I added this in the head section:

<script>
     
	jQuery.noConflict();
     
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
     
     // Use Mootools with $(...), etc.
     $('someid').hide();
   </script>

And I changed the menu.js code to this:

jQuery(document).ready(function(){

	jQuery("#nicemenu img.arrow").click(function(){ 
								
		jQuery("span.head_menu").removeClass('active');
		
		submenu = jQuery(this).parent().parent().find("div.sub_menu");
		
		if(submenu.css('display')=="block"){
			jQuery(this).parent().removeClass("active"); 	
			submenu.hide(); 		
			jQuery(this).attr('src','images/arrow_hover.png');									
		}else{
			jQuery(this).parent().addClass("active"); 	
			submenu.fadeIn(); 		
			jQuery(this).attr('src','images/arrow_select.png');	
		}
		
		jQuery("div.sub_menu:visible").not(submenu).hide();
		jQuery("#nicemenu img.arrow").not(this).attr('src','images/arrow.png');
						
	})
	.mouseover(function(){ jQuery(this).attr('src','images/arrow_hover.png'); })
	.mouseout(function(){ 
		if(jQuery(this).parent().parent().find("div.sub_menu").css('display')!="block"){
			jQuery(this).attr('src','images/arrow.png');
		}else{
			jQuery(this).attr('src','images/arrow_select.png');
		}
	});

	jQuery("#nicemenu span.head_menu").mouseover(function(){ jQuery(this).addClass('over')})
								 .mouseout(function(){ jQuery(this).removeClass('over') });
	
	jQuery("#nicemenu div.sub_menu").mouseover(function(){ jQuery(this).fadeIn(); })
							   .blur(function(){ 
							   		jQuery(this).hide();
									jQuery("span.head_menu").removeClass('active');
								});		
								
	jQuery(document).click(function(event){ 		
			var target = jQuery(event.target);
			if (target.parents("#nicemenu").length == 0) {				
				jQuery("#nicemenu span.head_menu").removeClass('active');
				jQuery("#nicemenu div.sub_menu").hide();
				jQuery("#nicemenu img.arrow").attr('src','images/arrow.png');
			}
	});			   
							   
								   
});

But it still isn't working. Can anyone spot my error? Thanks...

justinmyoung 12 Junior Poster · Answer 5 · 2008-08-24T02:02:38+00:00

I was able to solve the problem. I was using two different platforms, jQuery and Mootools. So I had to write a noConflict () script. I arranged the order of the script tags, and it looks like this:

<script>
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
</script>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">

jQuery(document).ready(function(){

	jQuery("#nicemenu img.arrow").click(function(){ 
								
		jQuery("span.head_menu").removeClass('active');
		
		submenu = jQuery(this).parent().parent().find("div.sub_menu");
		
		if(submenu.css('display')=="block"){
			jQuery(this).parent().removeClass("active"); 	
			submenu.hide(); 		
			jQuery(this).attr('src','images/arrow_hover.png');									
		}else{
			jQuery(this).parent().addClass("active"); 	
			submenu.fadeIn(); 		
			jQuery(this).attr('src','images/arrow_select.png');	
		}
		
		jQuery("div.sub_menu:visible").not(submenu).hide();
		jQuery("#nicemenu img.arrow").not(this).attr('src','images/arrow.png');
						
	})
	.mouseover(function(){ jQuery(this).attr('src','images/arrow_hover.png'); })
	.mouseout(function(){ 
		if(jQuery(this).parent().parent().find("div.sub_menu").css('display')!="block"){
			jQuery(this).attr('src','images/arrow.png');
		}else{
			jQuery(this).attr('src','images/arrow_select.png');
		}
	});

	jQuery("#nicemenu span.head_menu").mouseover(function(){ jQuery(this).addClass('over')})
								 .mouseout(function(){ jQuery(this).removeClass('over') });
	
	jQuery("#nicemenu div.sub_menu").mouseover(function(){ jQuery(this).fadeIn(); })
							   .blur(function(){ 
							   		jQuery(this).hide();
									jQuery("span.head_menu").removeClass('active');
								});		
								
	jQuery(document).click(function(event){ 		
			var target = jQuery(event.target);
			if (target.parents("#nicemenu").length == 0) {				
				jQuery("#nicemenu span.head_menu").removeClass('active');
				jQuery("#nicemenu div.sub_menu").hide();
				jQuery("#nicemenu img.arrow").attr('src','images/arrow.png');
			}
	});			   
							   
								   
});

</script>


<!-- START Fx.Slide -->
<!-- The CSS -->
<link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
<!-- Mootools - the core -->
<script type="text/javascript" src="scripts/mootools-1.2-core-yc.js"></script>
<!--Toggle effect (show/hide login form) -->
<script type="text/javascript" src="scripts/mootools-1.2-more.js"></script>
<script type="text/javascript" src="scripts/fx.slide.js"></script>
<!-- End Fx.Slide -->


</head>

Now I can use two scripts on the same page, using two different javascript platforms.

conflicting Javascripts?

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers