jQuery conflict with multiple libraries?

Question

I am sure that the conflict is between my pageslide and image slider..

Here is the code for the page slide:

<ul>
    <li>
        <a href="javascript:$.pageslide({ direction: 'right', href: '_secondary.html' })" class="first">Slide to the right, and load content from a secondary page.</a>
    </li>

    <li>
        <a href="javascript:$.pageslide({ direction: 'left', href: '/template/_secondary.html' })" class="second">Open the page programatically.</a>
    </li>
</ul>
<script>
var jq171 = jQuery.noConflict();
</script>
<script src="/template/js/jquery-1.7.1.min.js"></script>
<script src="/template/js/jquery.pageslide.js"></script>
<script>
    /* Default pageslide, moves to the right */
    $(".first").pageslide({ direction: "right"});

    /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
    $(".second").pageslide({ direction: "left"});
</script>`

Here is the image slider: This code references two jQuery libraries - v1.5.1 & orbit-1.2.3

<div class="container" style="margin-top:20px; margin-left:10px;">
    <div id="featured"> 
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
    </div>

For a minute a I had them both working together, but i'm not sure what is causing the conflict. I have tried the no conflict script in different variations.. Let me know if you need any more information to help. Thanks!

You need to call noConflict after including the 2nd jQuery script. — Rocket Hazmat, Jul 6 '12 at 18:03
moving the v1.7.1 library breaks the page slide and the image slider doesn't work. are you talking about a noconflict for the pageslide.js? — dilloncarter, Jul 6 '12 at 18:07
Seriously... throw out your old plugins and get replacements, or stick to one version of jQuery. For that one little page, you don't need to bring in over 35,000 lines of library javascript just to make some things fade in and out. — Chris Baker, Jul 6 '12 at 18:21
Chris, you have a point, so are you suggesting I simply take out the elements I need for this? — dilloncarter, Jul 6 '12 at 18:28
I suggest you stop, remove all effects. Design your page. Pick a version of jQuery -- I suggest the newest (1.7x). Then you use a CDN-hosted copy of it (code.jquery.com/jquery.min.js, for example). THEN, get together a small, tasteful collection of effects that will enhance your page. Only chose things that work in the latest jQuery version. The way you are doing it makes everything harder for you, which is the opposite of what a library should do. Also, because you're using old versions, you still have to worry about browser compatibility -- also a main purpose for using a library. — Chris Baker, Jul 6 '12 at 18:33

Chris Baker · Answer 1 · 2012-07-06 18:05:27Z

The code will work sometimes and not others because of variances in the speed that the library script loads. Sometimes, it loads fast enough to be in place when you start using it, sometimes not. That's why you should put your initial code in a ready block:

<script src="/template/js/jquery-1.7.1.min.js"></script>
<script src="/template/js/jquery.pageslide.js"></script>
<script type="text/javascript">
    var jq171 = jQuery.noConflict();
    jq171.ready(function ($) {
        /* Default pageslide, moves to the right */
        $(".first").pageslide({ direction: "right"});

        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
        $(".second").pageslide({ direction: "left"});
    });
</script>

Also, I urge you to reconsider using two libraries on the same page, or even the same site. One is enough!

Documentation

jQuery ready - http://api.jquery.com/ready/

Downvoter, please explain -- this answer is factually correct. — Chris Baker, Jul 6 '12 at 18:09
Knew who did it as soon as I saw your answer. Edit the answer to add such a minute correction. — Chris Baker, Jul 6 '12 at 18:10
Removed DV, but why define another variable, jq171 is just not needed. :) — iambriansreed, Jul 6 '12 at 18:11
When one is conducting the bad practice of using two versions of jQuery on the same page, it is the standard procedure to alias each version to a descriptive variable so that one may, in later scripts, correctly refer to the desired version. See stackoverflow.com/questions/1566595/… — Chris Baker, Jul 6 '12 at 18:14

Vohuman · Answer 2 · 2012-07-06 18:06:41Z

use noConflict after loading jQuery and use it instead of $():

var jq171 = jQuery.noConflict();
jq171(document).ready(function () {
   jq171(".first").pageslide({ direction: "right"});
   // ....
})

Greg Pettit · Answer 3 · 2012-07-06 18:29:35Z

up vote1down vote

You have three different versions of jQuery loading. Forget juggling them with noConflict, there's just no reason to load three versions.

edited Jul 6 '12 at 18:29

answered Jul 6 '12 at 18:23

Greg Pettit

7,70223045

Whoever downvoted... even if the noConflict thing isn't true, a comment would suffice. The advice to not have THREE different versions of jQuery is absolutely good advice. THey don't need 1.6.4, 1.5.1, and 1.7.1 on the same page. – Greg Pettit Jul 6 '12 at 18:26

I just DVed. "the noConflict thing isn't true" remove it and I will remove my DV. 3 versions is ridiculous and a point I am surprised nobody else made. :) – iambriansreed Jul 6 '12 at 18:27

2

So you comment, I update... it's much friendlier than an (ironically) anonymous downvote. – Greg Pettit Jul 6 '12 at 18:28

Wasn't me..but I am clearly not a js expert..so If I only load one library it will be enough to support those elements? – dilloncarter Jul 6 '12 at 18:30

1

dillon, you're not loading 3 libraries, you're loading 3 different versions of the same library. You only need 1 version of that one library. I don't see any others (prototype, etc) even being used. I understand that when we follow tutorials and use sample code, it's not always 100% clear, though. We can be led to believe that this particular version is required for this specific plugin. – Greg Pettit Jul 6 '12 at 18:33

show 3 more comments

score 1 · Answer 4 · 2012-07-06 18:33:25Z

Run your jQuery in a ready state passing the $ variable.

Use only one jQuery library, preferably the latest and from a CDN.

jQuery.noConflict();
jQuery.ready(function ($) {
    /* Default pageslide, moves to the right */
    $(".first").pageslide({ direction: "right"});

    /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
    $(".second").pageslide({ direction: "left"});
});

// Outside the ready state $ calls the other library.

You are here

jQuery conflict with multiple libraries?

4 Answers

友情链接

搜索表单

用户登录

You are here

jQuery conflict with multiple libraries?

4 Answers

友情链接