SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Javascript on same page not working help

    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

    HTML Code:
    	<!-- 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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Try removing this line:

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

  3. #3
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    HTML Code:
    <!-- 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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •