How do you keep multiple javascripts from interacting and effecting each other?
thanks
justinmyoung 12 Junior Poster
R0bb0b 344 Posting Shark
How do you keep multiple javascripts from interacting and effecting each other?
thanks
Ensure that your function and variable names are unique.
justinmyoung 12 Junior Poster
thanks, I'll have a look at that
justinmyoung 12 Junior Poster
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
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
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
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.
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.