Jump to content

jquery conflict?

elmohack

By elmohack
in JavaScript

 Share

Recommended Posts

elmohack Newbie

elmohack

Posted
Posted

So i have coda slider and royal slider.. if i remove coda slider royal slider works. If i add coda slider royal slider doesnt work.. Can anyone help ? Ive been trying to solve this for hours :S <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title> </title><link rel="stylesheet" href="css/zemos.css" type="text/css" /><link rel="stylesheet" href="royalslider.css" type="text/css"/><link rel="stylesheet" href="royalslider-skins/default/default.css"/><script src='js/jquery-1.6.2.min.js'></script><script src="js/jquery.easing.1.3.min.js"></script><script src="js/royal-slider-8.1.min.js"></script> <script src="./js/jquery-1.7.2.min.js"></script> <script src="./js/jquery-ui-1.8.20.custom.min.js"></script> <!-- This of course is required. The full version (not .min) is also included in the js directory --> <script src="./js/jquery.coda-slider-3.0.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="./css/coda-slider.css"> <script type="text/javascript">$(document).ready(function() { $('#slider-id').codaSlider({ autoSlide:true, autoHeight:false, dynamicTabs:false, dynamicArrowsGraphical:true });});</script></head><body class="bg"> <div id="mySlider" class="royalSlider default"> <!-- Container of slides(images) --> <ul class="royalSlidesContainer"> <!-- Slides --> <li class="royalSlide"> <img class="royalImage" src="images/1.jpg" width="998" height="400"/> </li> <li class="royalSlide"> <img class="royalImage" src="images/2.jpg" width="998" height="400"/> </li> <li class="royalSlide"> <img class="royalImage" src="images/3.jpg" width="998" height="400"/> </li> <li class="royalSlide"> <img class="royalImage" src="images/4.jpg" width="998" height="400"/> </li> </ul></div><script>$(document).ready(function() { $("#mySlider").royalSlider({ captionShowEffects:["moveleft", "fade"], directionNavAutoHide: true, slideshowEnabled: true, slideshowDelay:5000 /* other options go here, view javascript options to learn more */ }); });</script><div class="container"> <div class="coda-slider" id="slider-id"> <div> <h2 class="title">Panel 1</h2> <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo</p> </div> <div> <h2 class="title">Panel 2</h2> <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p> </div> <div> <h2 class="title">Panel 3</h2> <p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.</p> </div> <div> <h2 class="title">Panel 4</h2> <p>Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor. Nullam pulvinar ultrices malesuada. Quisque lobortis bibendum nisi et condimentum. Mauris quis erat vel dui lobortis dignissim.</p> </div> </div></div></body></html>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

The no conflict technique doesn't let you run multiple versions of jQuery at once, it lets you run jQuery with other libraries that also decided that "$" was the perfect identifier for their global objects. You can't run multiple versions of jQuery at the same time, they will always conflict with each other.

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Where you went wrong is trying to run 2 versions of jQuery at the same time. Remove one of the versions. If your addon scripts don't work with that version of jQuery then either fix the script or find one that does. What you can't do is try and load 2 versions of jQuery at once. The second one will overwrite the first one.

  • Like 1
Link to comment
Share on other sites
elmohack Newbie

elmohack

Posted
  • Author
Posted (edited)

I have tried remove 1 or the other and tried different versions still no luck.. apparently coda still works with version With version 1.6.2 still doesnt work.. EDIT Can i give u a hug :) I manage to fix it as you said. My mistake was removing jquery version but forgetting to remove jquery UI as i thought that had nth to do with it.Oh man works like a charm thanks a billion :D

Edited by elmohack
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...