Conflicting jQuery/JavaScript?

Question

I am trying to run two different jQuery/Java Scripts under one file name... And when I do they do not seem to work hand-in-hand one works and the other doesn't.

I have a page that requires both the scripts, so I tried putting those two in one file. That doesn't work, but when I split them up, they seem to work...

I know very little about JavaScript and jQuery can someone guide me into allowing these two scripts not to conflict?

$(document).ready(function($) {
$(".myslider").slideshow({
 width : 643,
 height : 303,
 control : false,
 transition : 'squarerandom',
});
$(document).ready(function() {
 $('.navigation .submenu > li').bind('mouseover', openSubMenu);
 $('.navigation .submenu > li').bind('mouseout', closeSubMenu);
 function openSubMenu() {
 $(this).find('ul').css('visibility', 'visible'); 
 };
 function closeSubMenu() {
 $(this).find('ul').css('visibility', 'hidden'); 
 }; 
});

I bet you can guess the two scripts. Thanks! Aaron

• kasdega: Sorry but I think we're going to need more info than this. What "doesn't work"? Do you get an error? What is the error? Don't make us 'guess' the two scripts. What does your html look like? Provide more info and we'll be better able to help you out.

Answer 1

Your syntax is off. Try this:

$(document).ready(function() {
 $(".myslider").slideshow({
 width : 643,
 height : 303,
 control : false,
 transition : 'squarerandom',
 });
 $('.navigation .submenu > li').bind('mouseover', openSubMenu);
 $('.navigation .submenu > li').bind('mouseout', closeSubMenu);
 function openSubMenu() {
 $(this).find('ul').css('visibility', 'visible'); 
 };
 function closeSubMenu() {
 $(this).find('ul').css('visibility', 'hidden'); 
 }; 
});

No need for 2 different document.readys, plus you weren't closing one of them.

• Aaron Brewer: That helps but for some reason the script below the .MYSLIDER script still doesn't work on other pages. Here is my layout. I have a slider on the home page, and the navigation has sub-menus. One the home page both the navigation and slideshows work. But the other pages, the sub menus do not? Is this an issue of an order of code? Thanks! Aaron
• Aaron Brewer: No sir. It's just not working. I have this crazy idea that it may be due to the order of the scripts?
• James Montagne: It's always possible that scripts are conflicting, but the fact that it works on the one page seems to imply that this is not the case.
• Aaron Brewer: Okay, I figured it out, suprisingly. Seeing as the SLIDER, in our case, is the first SCRIPT to be run via the .js file, it will execute the functions it is relevant with. Now, note, the SLIDER script is first. If the SLIDER SCRIPT is non-existent on a page, then there is no way for the SLIDER SCRIPT to run so it creates a paradox? Hence the NAVIGATION.SUBMENU SCRIPT can't be executed because the SLIDER SCRIPT is trying to execute, but it cannot execute because there are no DIVs (in our case) that are relevant to that script. I think that sums it up? Thank you very much!!! :)

Answer 2

You have a syntax error: transition : 'squarerandom', shouldn't have a trailing comma.

That makes the entire file invalid.

• James Montagne: Oddly enough, chrome doesn't complain about that.
• jfriend00: This is only a problem in older versions of IE and as of ES5, it's even allowed (thus why it works fine in modern browsers). For backwards compatibility, it's a good idea not to put that extra comma there, but unless they were debugging in an older version of IE, this is probably not the main issue.