Javascript Conflict with 2 scripts - Need Help!

If someone could help with a jscript issue I'd be very grateful! I have two scripts for different sections of the page which I'm placing in the head, but are in conflict on the same page and just can't seem to get them to work together. Both are as follows:

<script type="text/javascript">
jQuery.noConflict();
 function updatesubcat() {
  $category = $('topcat').options[$('topcat').selectedIndex].value;
  if ($category.match(' redir')) {
   jQuery('#subcategory').html('');
   window.location.href='/<%=server.HTMLEncode(Session("PublicFranchiseName"))%>/' + $category.replace(' redir','') + '.html';
  } {
   PagetoDiv("/ajax/home_subcategory.asp?c="+$category,"subcategory");
  }
 }
</script>


**AND:**


<script type="text/javascript">
$(document).ready(function() {  

 //Execute the slideShow, set 4 seconds for each images
 slideShow(4000);

});

function slideShow(speed) {


 //append a LI item to the UL list for displaying caption
 $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

 //Set the opacity of all images to 0
 $('ul.slideshow li').css({opacity: 0.0});

 //Get the first image and display it (set it to full opacity)
 $('ul.slideshow li:first').css({opacity: 1.0});

 //Get the caption of the first image from REL attribute and display it
 $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
 $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

 //Display the caption
 $('#slideshow-caption').css({opacity: 0.7, bottom:0});

 //Call the gallery function to run the slideshow 
 var timer = setInterval('gallery()',speed);

 //pause the slideshow on mouse over
 $('ul.slideshow').hover(
  function () {
   clearInterval(timer); 
  },  
  function () {
   timer = setInterval('gallery()',speed);   
  }
 );

}

function gallery() {


 //if no IMGs have the show class, grab the first image
 var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

 //Get next image, if it reached the end of the slideshow, rotate it back to the first image
 var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first开发者_如何学Python') :current.next()) : $('ul.slideshow li:first'));

 //Get next image caption
 var title = next.find('img').attr('title'); 
 var desc = next.find('img').attr('alt'); 

 //Set the fade in effect for the next image, show class has higher z-index
 next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

 //Hide the caption first, and then set and display the caption
 $('#slideshow-caption').slideToggle(300, function () { 
  $('#slideshow-caption h3').html(title); 
  $('#slideshow-caption p').html(desc); 
  $('#slideshow-caption').slideToggle(500); 
 }); 

 //Hide the current image
 current.animate({opacity: 0.0}, 1000).removeClass('show');

}
</script>

This editor is not allowing the script tags - but they are placed obviously at the top and bottom of each script

Any help much appreciated! Thanks,

---

If you use jQuery.noConflict(); (as i know) You must use jQuery() instead of $()

or

jQuery(document).ready(function($) {
  $(selectors).actions
}

---

The $ is a variable that references the jQuery object. I'm guessing the other scripts on the page also use the $ for a variable and this is causing the problem. You'll want to use the jQuery.noConflict() method, but you must assign it to a variable that you'll replace in your code.

var jq = jQuery.noConflict();

This will change your usage from:

$category = $('topcat').options[$('topcat').selectedIndex].value;

to something like this:

$category = jq('topcat').options[$('topcat').selectedIndex].value;

You don't have to use jq like I did, any variable should do the trick. Hope this helps.