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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy JavaScript/HTML help!

    Hello all,
    I'm quite new to programming and I'm having some trouble using two Jquery plugin on one html page. Both work fine if i hide the other and it is only when I try to you both that one stops working.
    The first is called 'Nivo Slider' and I'm using this as a navigation tool, and the other is called 'Tweetable' (which most are probably familiar with).
    Anyway, here is the HTML code and any help/advice would be much appriciated!

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Plugged In</title>
    	<link href="maincss.css" rel="stylesheet" type="text/css" />
      <!-- Tweetable Plugin -->
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.tweetable.js"></script>
      <!-- Nivo Slider Plugin -->
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script></head>
    
    <body>
    	<div id="wrapper">
            <!-- SECTION 1 -->
            <!-- Headerlogo and Tagline -->
            <img src="images/header.jpg" width="468" height="60" />
            
            
            
            <!-- SECTION 2 -->
            <!-- Navigation -->
            <div id="navigation">
                <p>
             		<li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Musicians</a></li>
                    <li><a href="#">Buisnesses</a></li>
                    <li><a href="#">Live Music</a></li>
                    <li><a href="#">Our Role</a></li>
                    <li><a href="#">Blog</a></li>
           		</p>
            </div>
            
            
            <!-- SECTION 3 -->
            <div id="apiwrapper">
                <!-- Twitter Feed Plugin Script -->
                <div id="tweets">
    				<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
                    <script type="text/javascript" src="jquery.tweetable.js"></script>
                    <script type="text/javascript">
                        $(function(){
                            $('#tweets').tweetable({username: 'pluggedinnorth', time: true, limit: 10, replies: true, position: 'append'});
                        });
                    </script>
                    <!--[if IE 6]>
                    <script type='text/javascript' src='dd_belated_png.js'></script>
                    <script>DD_belatedPNG.fix('.png');</script>
                    <![endif]-->            
                 </div>
                <div id="slider">
                    <img src="images/rollover/1-musicians.jpg" alt="" />
                    <a href="http://dev7studios.com"><img src="images/rollover/2-buisness.jpg" alt="" title="#htmlcaption" /></a>
                    <img src="images/rollover/3-buissnes.jpg" alt="" title="This is an example of a caption" />
                    <img src="images/slide4.jpg" alt="" />
                </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>
                <!-- Nivo Slider Plugin Script -->
    			<script type="text/javascript">
                $(window).load(function() {
                    $('#slider').nivoSlider();
                });
                </script>
                </div>
                
                   
            <!-- SECTION 4 -->
            <!-- News -->
            <p>
            24 April 2011
            </p>
            <p>
            Plugged In Is Live!
            </p>
            <p>
            Welcome to the newly opened Plugged In website. Have a look around and get to know the site, we have lots of interesting
            and informative content not only for fledling muscians but buisnesses, live music and connections to other buisnesses and musicians.
            Keep coming back to check out new content and don't forget to bookmark us!
            </p>
            
            
            <!-- SECTION 5 -->
            <!-- Footer -->
                   <iframe src="http://www.facebook.com/plugins/like.php?href=file:///E:/Web/Site/index.html"
                    scrolling="no" frameborder="0"
                    style="border:none; width:450px; height:80px"></iframe>
            
    </div>
    </body>
    </html>
    In this current state, only the twitter plugin works, and not the slider.
    I have tried moving them around out of the same DIV's and this hasnt worked.
    I know they are both tied into the same 'Wrapper' DIV but I'm hoping thats not the issue...
    Help please!
    Thanks,
    spitfire182

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    src="jquery.nivo.slider.pack.js"
    So is this .js file saved in the same location as the current page?

    The following code
    Code:
                <!-- Nivo Slider Plugin Script -->
    			<script type="text/javascript">
                $(window).load(function() {
                    $('#slider').nivoSlider();
                });
                </script>
    Occurs within the 'body', within a 'div'. It might still work (?) but you should move it into the 'head' area, just before the opening 'body' tag.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can't add the script to jquery twice. They start conflicting. Change this
    Code:
    <!-- Nivo Slider Plugin -->
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    to this
    Code:
    <!-- Nivo Slider Plugin -->
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
        <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Tags for this Thread

    Posting Permissions

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