Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Darlington UK
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Running 2 jquery items simultaneously

    Hello everyone at Coding Forums, this is my first post!

    I am relatively new to web design but I feel I am now mastering basic HTML and CSS. I have started to venture into adding some jquery elements into my website but have no coding skills in javascript or jquery. I am just taking code from the web which is free to use and alter for my own use.

    The problem I am having is I am trying to implement a "Kwicks" slider into my site which I have managed to achieve with no problems. I also want to implement a "Nivo" slideshow onto the same page, but when I do that the "Kwicks" slider stops working and only the slideshow is working.

    Here is a sample of my code. I have only included code from the page that is relevant to "Kwicks" and "Nivo".

    Does anyone have any idea what I have to do to make them both work simultaneously?

    Thanks.

    Code:
    <head>
    <link rel="stylesheet" type="text/css" href="css/kwicks.css" />
    <link rel="stylesheet" href="nivo/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo/themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo/themes/orman/orman.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo/demo/style.css" type="text/css" media="screen" />
    
    <!-- Start of Kwicks head script -->
    		<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    		<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    		<script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
    		
    		<script type="text/javascript">
    			$().ready(function() {
    				$('.kwicks').kwicks({
    					max : 220,
    					spacing : 2,
    					isVertical : true
    				});
    			});
    		</script>
    <!-- End of Kwicks head script -->
    </head>
    
    
    
    <body>
    
    
    
    
    <!-- Start of Nivo -->
        <div id="wrapper">
                <div class="slider-wrapper theme-default">
                       <div id="slider" class="nivoSlider">
                    	<img src="nivo/demo/images/toystory.jpg" alt="" />
                            <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                            <img src="nivo/demo/images/walle.jpg" alt="" />
                            <img src="nivo/demo/images/nemo.jpg" alt="" title="#htmlcaption" />
                       </div>
                       <div id="htmlcaption" class="nivo-html-caption">
                            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
                       </div>
                </div>
    
        </div>
        <script type="text/javascript" src="nivo/demo/scripts/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="nivo/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
    <!-- End of Nivo -->
    
    
    
    
    <!-- Start of Kwicks -->
             <div id="kwicks">    
                    <ul class="kwicks horizontal" >
                        <li id="kwick_1"><img src="images/kwicks-ballet.jpg" width="250" height="220" alt="ballet" /></li>
                        <li id="kwick_2"><img src="images/kwicks-tap.jpg" width="250" height="220" alt="tap" /></li>
                        <li id="kwick_3"><img src="images/kwicks-modern-jazz.jpg" width="250" height="220" alt="modern jazz" /></li>
                        <li id="kwick_4"><img src="images/kwicks-acrobatics.jpg" width="250" height="220" alt="acrobatics" /></li>
                        <li id="kwick_5"><img src="images/kwicks-lyrical.jpg" width="250" height="220" alt="lyrical" /></li>
                        <li id="kwick_6"><img src="images/kwicks-hip-hop-street.jpg" width="250" height="220" alt="hip hop street" /></li>
                        <li id="kwick_7"><img src="images/kwicks-performance.jpg" width="250" height="220" alt="performance" /></li>
                        <li id="kwick_8"><img src="images/kwicks-parent-&-toddler.jpg" width="250" height="220" alt="parent and toddler" /></li>
                    </ul>
             </div>    
    <!-- End of Kwicks -->    
    
    </body>

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Your Kwiks pack and your Nivo pack may have duplicate function names, or the CSS might have duplicate class/id names. Either scenario will create conflicts that will keep one or both from running properly. It's hard to know what to change since some scripts rely on CSS of a certain name being there, but most likely it's a naming conflict.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You alos have jQuery loaded twice. Here:

    Code:
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    and here

    Code:
    <script type="text/javascript" src="nivo/demo/scripts/jquery-1.6.1.min.js"></script>
    That can quite frequently cause problems.

  • Users who have thanked SB65 for this post:

    anthgav (11-04-2011)

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Darlington UK
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by SB65 View Post
    You alos have jQuery loaded twice. Here:

    Code:
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    and here

    Code:
    <script type="text/javascript" src="nivo/demo/scripts/jquery-1.6.1.min.js"></script>
    That can quite frequently cause problems.

    What you told me was the problem. As "Kwicks" and "Nivo" had been created with different versions of jquery I thought I had to keep both versions in the page to allow them to work. I deleted
    Code:
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    out of the <head> and moved
    Code:
    <script type="text/javascript" src="nivo/demo/scripts/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="nivo/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
    from the <body> into the <head> and everything worked. So thanks very much.
    Last edited by anthgav; 11-04-2011 at 06:56 PM.


  •  

    Posting Permissions

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