SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Resolving a JQuery conflict

    Hi there,

    Okay so thanks to the advice I received earlier about sliders, I've managed to create the following page which also has my iOS Slider working alongside, with a bit of script controlling the conflict between the two libraries used. However, I now want to add in a further JQuery library to create the "puff" effect on a div.

    The problem is, when I add in the puff code I have, it breaks the page and none of the libraries will work. Below is a link to the iOS Slider and BGStretcher page with a further link showing the puff test document (please excuse the simplicity for the moment, I am simply trying to get it working ).

    www.psychobeing.co.uk/2012/demo/index.html

    www.psychobeing.co.uk/2012/demo/pufftest.html

    I'm fairly sure I need to do some more work with a conflict script or maybe do the puff effect some other way using the existing libraries? Surely the latest version of JQuery should incorporate all of the features and there should be no need for these conflicts, unless I'm missing something?

    If anyone can help me out I'd really appreciate it!

    Cheers,

    Shoxt3r

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've tried reordering the scripts and adding in the noConflict script below between the puff effect script and the others but it still doesn't work, if anything it means nothing works! . Any help would be much appreciated!

    From what I can tell there is a conflict between the iOSSlider and BGStretcher scripts and the following:
    Code:
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
    Below is the latest version with everything included (including the above lines)

    http://www.psychobeing.co.uk/2012/demo/index2.html

    Any ideas?

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone help? There's been 188 views and no replies

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, after looking at the Chrome console feature I've managed to track the error down to the following.

    Code:
    Uncaught TypeError: Object [object Object] has no method 'iosSlider' index2.html:25
    (anonymous function) index2.html:25
    f.extend._Deferred.e.resolveWith jquery-1.6.1.min.js:16
    e.extend.ready jquery-1.6.1.min.js:16
    c.addEventListener.z
    Any ideas anyone?

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've now got the background stretcher and iOSSlider working again with the "content" div appearing alongside but when the button is clicked, the following error message appears in the console.

    Code:
    Uncaught TypeError: Property '#<Object>' of object #<Object> is not a function jquery-1.6.1.min.js:18
    f.fx.step jquery-1.6.1.min.js:18
    h jquery-1.6.1.min.js:18
    f.fx.custom jquery-1.6.1.min.js:18
    f.fx.hide jquery-1.6.1.min.js:18
    f.fn.extend.animate jquery-1.6.1.min.js:18
    f.extend.dequeue jquery-1.6.1.min.js:16
    f.fn.extend.queue jquery-1.6.1.min.js:16
    e.extend.each jquery-1.6.1.min.js:16
    e.fn.e.each jquery-1.6.1.min.js:16
    f.fn.extend.queue jquery-1.6.1.min.js:16
    f.fn.extend.animate jquery-1.6.1.min.js:18
    f.fn.extend.toggle jquery-1.6.1.min.js:18
    (anonymous function) index2.html:19
    f.event.handle jquery-1.6.1.min.js:17
    f.event.add.i.handle.k
    If you want to see for yourself, I've uploaded the code at the following address.
    http://www.psychobeing.co.uk/2012/demo/index2.html

    Cheers.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I only see one library on your page—namely, jQuery—so I doubt there's a conflict, as such. However, you have two versions of jQuery on the page, which will cause problems. Only link to the jQuery library once on our page. You have this:


    <script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src = "../jquery-1.6.1.min.js"></script>


    Eliminate one of these, and see if that helps. The link to the library must come before any other jQuery code, so perhaps use this

    <script type="text/javascript" src = "../jquery-1.6.1.min.js"></script>

    but move it up above any other jQuery code.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Shoxt3r View Post
    If you want to see for yourself, I've uploaded the code at the following address.
    http://www.psychobeing.co.uk/2012/demo/index2.html
    OK, that page now has three versions of jQuery, even worse ...

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    .
    .
    .
    
    <script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src = "../jquery-1.6.1.min.js"></script>
    Get rid of all but the top one, and maybe replace it with 1.6.1.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thanks very much for your help! I've managed to get it working using the following libraries in the order below which now ensures all three elements are working. It's probably not the most efficient code though so if you have any further points please let me know .

    Code:
    <script type="text/javascript" src = "../jquery-1.6.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    http://www.psychobeing.co.uk/2012/demo/index2.html

    It seems all that was needed was a reordering of the JQuery.

    Cheers,

    Shoxt3r.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Great! Yes, jquery-ui is an extension of jQuery, rather than a duplicate, so that is indeed needed. The key is not to use the basic jQuery library itself more than once.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ha yeah I realise that now

    By the way, I don't know if you noticed but after some time (and it may be because I'm switching windows) after a short amount of time the BGStretcher script seems to ignore the "nextSlideDelay" of 5 seconds I've placed within the script. It will work for the first few runs through it seems but then begin to go off track.....any thoughts?

    It's not something which is placed on the demo by the way so it could be a bug which the creator has hidden.....

    http://www.psychobeing.co.uk/2012/demo/index2.html

    More details on it here: http://www.ajaxblender.com/bgstretch...n-updated.html


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •