Response title
This is preview!
jQuery.noConflict();
in Using jQuery
•
11 years ago
Hi,
I am experiencing conflict issues.
I'm new to jQuery, so go easy on me pls. 
I am using two lots of jQuery code (1. slider & 2. mouseover) on the same <div> and so are nested, but only the second renders.
I am using two lots of jQuery code (1. slider & 2. mouseover) on the same <div> and so are nested, but only the second renders.I have inserted jQuery.noConflict(); as directed, but still only second renders....
A condensed version of my code below...can anyone help me render both sets of code please?
Thanks
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> <!-- Launch Slider Kit -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function(){
// Carousel
jQuery("#carousel-demo1").sliderkit({
auto:false,
shownavitems:4,
start:0
});
});
</script>
</head>
<body>
<div id="page">
<div id="scroller"> <div class="inner layout-1col"> <!--Activate mouseover event with js-->
<div id="content">
<!-- Start carousel-->
<div id="carousel-demo1" class="sliderkit carousel-demo1">
<div class="sliderkit-nav">
<div class="sliderkit-nav-clip">
<ul id="thumbs"><!--Launches mouseover -->
<li><a href="#" title="#"><img src="images/#.png" alt="#" /></a></li>
<li><a href="#" title="#"><img src="images/#.png" alt="#" /></a></li>
<li><a href="#" title="#"><img src="images/#.png" alt="#" /></a></li>
<li><a href="#" title="#"><img src="images/#.png" alt="#" /></a></li>
<li><a href="#" title="#"><img src="images/#.png" alt="#" /></a></li>
<li><a href="#" title="#"><img src="images/#.png" alt="#" /></a></li>
</ul>
</div>
<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#" title="Scroll left"></a></div>
<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#" title="Scroll right"></a></div>
</div>
</div>
<!-- // end of carousel-->
</div>
</div>
</div>
<!-- panes -->
<div>
<div class="description" id="#"> <div class="arrow"> </div>...content ... </div>
<div class="description" id="#"><div class="arrow"> </div> .. content .. </div>
<div class="description" id="#"> .. content .. </div>
<div class="description" id="#"> ...Content...</div>
<div class="description" id="#">...content...
<div id="middle">
<img src="images/#.png" alt="#" />
</div>
</div>
<div class="description" id="#">...content...</div>
</div>
<script>
$("#thumbs").tabs("div.description", {event:'mouseover'});
</script>
<!--Ends mouseover event with js-->
<!--End of mouseover-->
1