Multiple Jquery Scripts

Question

I plan on using multiple jquery scripts to do different things. The site already isn't working properly. I can either have the dynamic loader or content slider as shown in the code. I know it has to do with the jquery-1.6.2.min.js and the other .min.js file. How can I have both scripts working?

<!DOCTYPE html>
<html>

<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

<title>Dynamic Page | Home</title>

<link rel='stylesheet' type='text/css' href='../css/style.css' />


<!--DYNAMIC LOADER-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='../js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='../js/dynamicpage.js'></script>

<!--CONTENT SLIDER-->
<link rel="stylesheet" href="../css/basic-jquery-slider.css">
<script src="../js/jquery-1.6.2.min.js"></script>
<script src="../js/basic-jquery-slider.js"></script>


<!--CONTENT SLIDER-->
<script>
  $(document).ready(function() {

    $('#banner').bjqs({
      'animation' : 'slide',
      'width' : 940,
      'height' : 403
    });

  });
</script>

<style>
.container {
width: 100%; left: 0; right: 0; top:0; bottom: 0; position: fixed; overflow: auto;
background-image:url(../images/screen.png);
font-family: Helvetica, sans-serif;
}
</style>
</head>

<body>
<div class="container">

<div id="page-wrap">


      <nav>

          <ul class="group">
          <img src="../../Website/images/logo.png">
              <li><div id="home"><a href="index.html"><img src="../images/menu-home.png"></div></a></li>
              <li><div id="about"><a href="about.html"><img src="../images/menu-about.png"></div></a></li>
              <li><div id="gallery"><a href="contact.html"><img src="../images/menu-gallery.png"></div></a></li>
              <li><div id="affiliates"><a href="#l"><img src="../images/menu-affiliates.png"></div></a></li>
              <li><div id="biography"><a href="#"><img src="../images/menu-bio.png"></div></a></li>
              <li><div id="contact"><a href="#"><img src="../images/menu-contact.png"></div></a></li>
          </ul>
      </nav>


    <section id="main-content">
    <div id="guts">



     <div id="container">

  <div id="banner">
    <ul class="bjqs">
      <li><img src="../images/banner02.jpg" title="Cool Skull"></li>
      <li><img src="../images/banner04.jpg" title="Women1"></li>
      <li><img src="../images/banner01.jpg" title="Kid With Shell"></li>
      <li><img src="../images/banner03.jpg" title="Women2"></li>
    </ul>
  </div>
</div>

    </div>
    </section>

</div>

</div>
</body>

</html>

Can you please post what error your browser is throwing? If you are using firefox hit 'Ctrl+Shift+J' to open the error console. Also, from the code above, I don't see two plugins being invoked. Are you invoking the other plugin in the "dynamicpage.js" file? — Vikas, Feb 05 '12 at 06:15
@Vikas I have a script that fades in page content when links are clicked and another script that is for a image slider. If i take out the jquery-1.6.2.min.js line the content fader will work fine but if I take out 1.4/jquery.min.js the slider will be fine but not the fader — user1165861, Feb 05 '12 at 06:19
ya not sure if there's another way so I can get both to work — user1165861, Feb 05 '12 at 06:28

score 1 · Answer 1 · answered Feb 05 '12 at 06:51

I think there is no good solution here but rather two options:

Resolve any incompatibilities in your legacy code to run on the most current version of jQuery
Revise your current code so that it's compatible with a previous version of jQuery if option one is not feasible.

I suggest this because in order to support two versions of jQuery you would still need to update one script or the other to reference jQuery via $jq (or something else) instead of the standard $. If you are going to update one code base or the other in this fashion it is more effective to use this time to simply resolve incompatibilities and support a single version of jquery. There are many reasons but the most important are:

Two references to the same framework can confuse other developers on the project.
Performance is hindered as the page must now request the framework twice.
Not much time is saved as you still need to update your codebase to reference a separate version of jQuery differently.
There is still potential for conflicts or problems with plugins and event handlers.

Spending the time to resolve problems to support one framework vs. spending time to support two instances of the same framework will increase your project's stability and allow it to be easier to support.

+1 keep your project sane by including only one version of jquery (preferably a recent one) — xec, Feb 05 '12 at 14:56

score 0 · Answer 2 · answered Feb 05 '12 at 06:25

0

Oh! I see you are using multiple versions of jquery on the same page. It's a given that conflicts are bound to happen. Here, try this link.

http://web.enavu.com/daily-tip/using-multiple-versions-of-jquery-on-the-same-page/

It might solve your problem.

answered Feb 05 '12 at 06:25

Vikas

264
3
9

so what I'm getting out of this, is to add this? – user1165861 Feb 05 '12 at 06:29
Yes. Please follow the instructions given in that link. It might solve your problem. – Vikas Feb 05 '12 at 06:33
Do I have to change all the $ in the 1.6.2.min.js?!? – user1165861 Feb 05 '12 at 06:44
Hmmm. Here's another link. This will explain you in more detail. http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/ http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page The second link is a thread discussed about the same. I suggest you to take some time and go through those links. – Vikas Feb 05 '12 at 06:54

Multiple Jquery Scripts

2 Answers2