5 Replies Latest reply on Dec 24, 2014 10:13 AM by jed279

    JS Element Conflict

    jed279

      Hi all! I'm nearing the end of a facelift on our existing business website and have run into a hiccup that I can't seem to solve on my own. I am trying to implement two js elements one a single page. Independently both elements work just fine. When I try to combine them on the same page however neither work.

       

      On pclake.com/test/index.html there is a slideshow just beneath the header in the #slider div and the other element is a slide out div fixed 200px from the top right hand side of the page that pops out when clicked.

       

      You can preview the slide out element on any of the pclake.com/test/ subpages of the website as there are no conflicts elsewhere.

       

      Any insight would be greatly appreciated. My expertise with JS elements doesn't expand much more than copy and pasting code.

        • 1. Re: JS Element Conflict
          Nancy OShea Adobe Community Professional & MVP

          You have 2 jQuery core libraries referenced.  And I don't think any plugin that uses 1.3 is worth wasting time on.  It's simply too old.  You want plugins that can all work successfully with the latest stable release -- currently jQuery 1.11.1

           

          So use one instance of this code and remove the others for 1.3 and 1.7 in your current code.

           

          <!--Latest jQuery Core Library-->

          <script src="http://code.jquery.com/jquery-latest.min.js">

          </script>

           

           

          Nancy O.

          1 person found this helpful
          • 2. Re: JS Element Conflict
            jed279 Level 1

            Thanks Nancy,

             

            Can you suggest any replacements for the outdated plugins?

            • 3. Re: JS Element Conflict
              osgood_ Level 8

              have you tried just removing the older jQuery framework?

               

              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

               

              If you do that does the image slide show work but the slide out <div> not work?

               

              Looks like they both work to me if you remove the older jQuery framework core library link.

               

               

              Also what is this all about, a link to a stylesheet attached to a <div>?

               

              <div class="container" href="/menu_assets/styles.css" rel="stylesheet" type="text/css">

               

               

              Plus you have a few broken links which point to your local hard drive in the code - file:///Macintosh HD/Users/jakedruck/Sites/: (I've put XXXX's in the email address to avoid spam harvestors which might get it from the forum)

               

              <div id="navcontact"><span class="phonenumber"> Call Now! (570) 247-2424 </span> <a href="file:///Macintosh HD/Users/jakedruck/Sites/test/Templates/email.com" class="emaillink" title="Email `XXXXXXXX"></a> <a href="file:///Macintosh HD/Users/jakedruck/Sites/test/Templates/facebook.com" class="facebooklink" title="Facebook"></a> <a href="file:///Macintosh HD/Users/jakedruck/Sites/test/Templates/tripadvisor.com" class="tripadvisorlink" title="TripAdvisor Rating"></a> </div>

              1 person found this helpful
              • 4. Re: JS Element Conflict
                jed279 Level 1

                When I preview it locally it does not however when I uploaded the revised html to the server it seems to work… doesn’t make much sense to me but if it works, I’ll take it!

                • 5. Re: JS Element Conflict
                  jed279 Level 1

                  Thanks for the reply! I do believe it is now working except that I have to fix a similar js conflict on the cabins&cottages page with the lightbox photo viewer. Some of the header links are still pointing locally and I plan to fix them shortly… thanks for noticing though.