Multiple Javascript on same page not working help

JavaScript
1

Hi I am trying to integrate two scripts of javascript on a single page one for a slider and the other for a scroller but if one works the other doesnt work, I have been trying to read about teh jquery conflict but I cannot seem to be able to implement can someone please help me out

these are the script I need on the page

	<!-- SLIDESHOW FILES -->
			<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
			<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/home-slider/jquery.jcarousel.min.js"></script>
			<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/home-slider/jquery-autoplay.pikachoose.js"></script>
			<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/home-slider/jquery.pikachoose.js"></script>
  		<!-- SLIDESHOW FILES -->

        <!-- SCROLLER FILES -->
    		<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/image-scroller/jquery-1.2.1.pack.js"></script>
			<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/image-scroller/jMyCarousel.js"></script>
        <!-- SCROOLER FILES -->


		<!-- SLIDESHOW FUNCTION -->
			<script language="javascript">
    			$(document).ready(
        		function (){
				$("#pikame").PikaChoose({carousel:true, hoverPause:true});
        		});
			</script>
        <!-- SLIDESHOW FUNCTION -->

         <!-- SCROLLER FUNCTION -->
           <script type="text/javascript">
				$(function() {
		    	$(".jMyCarousel").jMyCarousel({
		        visible: '4',
		        eltByElt: true,
		        evtStart: 'mousedown',
		        evtStop: 'mouseup'
		    	});

				});
			</script>
 		<!-- SCROLLER FUNCTION -->
2

Try removing this line:

<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/image-scroller/jquery-1.2.1.pack.js"></script>

You don’t want to link to the jQuery library more than once on a page, and you have already linked to it higher up in the HTML, where it should be. :slight_smile:

3

Hi have tried to remove that line you have told me but only worked one function, but I found another way which is working now. Thanks for the help anyways.

<!-- SCROLLER FILES -->
    		<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/image-scroller/jquery-1.2.1.pack.js"></script>
			<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/image-scroller/jMyCarousel.js"></script>
        <!-- SCROOLER FILES -->

		<!-- SLIDESHOW FILES -->
			<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
			<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/home-slider/jquery.jcarousel.min.js"></script>
			<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/home-slider/jquery-autoplay.pikachoose.js"></script>
  		<!-- SLIDESHOW FILES -->


        <script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
				$("#pikame").PikaChoose({carousel:true, hoverPause:true});
});
	$(function() {
		    	$(".jMyCarousel").jMyCarousel({
		        visible: '4',
		        eltByElt: true,
		        evtStart: 'mousedown',
		        evtStop: 'mouseup'
		    	});

				});</script>
4

Hm, odd for two reasons: you still have 2 versions of jQuery linked there, which normally causes a failure, and secondly, because noConflict (so I thought) was to prevent jQuery conflicting with another library, not with itself. Anyway, if you found something that works and that you are happy with, then great. :slight_smile: