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? :confused:

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

Cheers,

Shoxt3r

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:


  <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? :slight_smile:

Can anyone help? There’s been 188 views and no replies :frowning:

Okay, after looking at the Chrome console feature I’ve managed to track the error down to the following.



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? :slight_smile:

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.


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.

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.

OK, that page now has three versions of jQuery, even worse …

<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.

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


<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.

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. :slight_smile:

Ha yeah I realise that now :slight_smile:

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? :slight_smile:

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/bgstretcher-2-jquery-stretch-background-plugin-updated.html