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

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. — kasdega
– kasdega, Commented Dec 9, 2011 at 20:00

James Montagne · Accepted Answer · 2011-12-09 19:59:03Z

4

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.

answered Dec 9, 2011 at 19:59

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aaron Brewer Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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!!! :)

SLaks · Accepted Answer · 2011-12-09 19:59:16Z

2

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

That makes the entire file invalid.

answered Dec 9, 2011 at 19:59

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

2 Comments

James Montagne Over a year ago

Oddly enough, chrome doesn't complain about that.

jfriend00 Over a year ago

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.

Collectives™ on Stack Overflow

Conflicting jQuery/JavaScript?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related