SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Prototype.js and jquery1.2.3 .js conflicting

    I cannot get my carousel slider and the modal box to both work together on the same page. I have seen the solution on the jquery site.. jquery.noconflict but I'm confused as to how I implement it..

    The page calls the following scripts:

    Code JavaScript:
    <script type="text/javascript" src="prototype.js"></script>
    	<script type="text/javascript" src="builder.js"></script>
    <script type="text/javascript" src="scriptaculous.js?  
        load=effects"></script>
    <script type="text/javascript" src="modalbox.js"></script>
     
     
     
    <script type="text/javascript" src="jcarousel/lib/jquery-1.2.3.pack.js"></script>
     
     
     
    <!--
      jCarousel library
    -->
    <script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>
     
     
     
    <script type="text/javascript">
     
    function mycarousel_initCallback(carousel)
    {
        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function() {
            carousel.startAuto(0);
        });
     
        carousel.buttonPrev.bind('click', function() {
            carousel.startAuto(0);
        });
     
        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
    };
     
    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel({
            auto: 4,
    		size: 4,
    		scroll: 1,
            wrap: 'last',
            initCallback: mycarousel_initCallback
        });
    });
     
    </script>

    With this setup only the carousel works however if I take out the following:

    Code JavaScript:
     
     
    <script type="text/javascript" src="jcarousel/lib/jquery-1.2.3.pack.js"></script>
     
     
     
    <!--
      jCarousel library
    -->
    <script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>
     
     
     
    <script type="text/javascript">
     
    function mycarousel_initCallback(carousel)
    {
        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function() {
            carousel.startAuto(0);
        });
     
        carousel.buttonPrev.bind('click', function() {
            carousel.startAuto(0);
        });
     
        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
    };
     
    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel({
            auto: 4,
    		size: 4,
    		scroll: 1,
            wrap: 'last',
            initCallback: mycarousel_initCallback
        });
    });

    the modal box then works... (obviously the carousel does not)

    How do get them both to play together nicely?

    I'm pulling my hair out with this one.

    any help would be greatly appreciated..

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There are modal box and carousel scripts written using both libraries. So rather than try to send two huge JS libraries at your users' browsers (especially crippling for mobile browsers), perhaps pick one and use it for both purposes?
    Last edited by Dan Grossman; Jun 25, 2009 at 06:04.

  3. #3
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your response and I understand the benefits but I would like to get it work with these two different libraries..

    any ideas how I go about this?

  4. #4
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    managed to get this to work.. but in future I will take your advice and will use the same frameworks..

    thanks again


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
  •