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

thanks

Ensure that your function and variable names are unique.

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

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

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

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.

This question has already been answered. Start a new discussion instead.