0

I am using two different jquery.min.js files from googleapis. One is for a slideshow (s3Slider) and the other is for a menu that should follow allong when the user scrolls down.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> For the slider

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> For the menu

When I have both, the menu stops going down allong with the page when one scrolls down...

Any solutions?

Bellow follows the HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> </title>

<link rel="stylesheet" type="text/css" href="assets/styles/style.css" media="screen" />

<link rel="stylesheet" type="text/css" href="assets/styles/jquery.fancybox-1.3.4.css" media="screen" />

<link rel="stylesheet" type="text/css" href="assets/styles/imgsldr.css" media="screen" />



<!--[if lt IE 9]><script type="text/javascript" src="assets/scripts/modernizr.js"></script><![endif]-->
</head>
<body>
<div class="wrapper">
  <header>
    <blockquote>Genom att förena två sjöer skapar vi en framtid mitt i landbygden!</blockquote>
</p></div><br></div>
  </header>
  <div class="nav-container">
    <nav>
      <ul>
        <li><a href="#hem" class="selected">Hem</a></li>
        <li><a href="#om">Om projektet</a></li>
        <li><a href="#sponsor">Sponsorer</a></li>
        <li><a href="#galleri">Galleri</a></li>
        <li><a href="#medlem">Bli medlem</a></li>
        <li><a href="#styr">Styrelse och funkt.</a></li>
        <li><a href="#kontakt">Kontakt</a></li>
      </ul>
      <div class="nav-left"></div>
      <div class="nav-right"></div>
      <div class="nav-above"></div>
    </nav>
  </div>
  <section id="hem">
    <div class="row">
      <div class="three columns">
        <h4>Hem</h4>
        <p>&nbsp;</p>
          <div id="nyheter">
            <p id="nyheterp">NYHETER</p>
            <p><br>
            </p>
            <h5>Nyhet #1</h5>

        </div>
      </div>
      <div class="nine columns">
        <h4>Bilder från projektet </h4>

        <!-- begins slider -->

        <div id="slider">
        <ul id="sliderContent">
            <li class="sliderImage">
                <img src="assets/gallery/1.jpg" alt="Bild 1" />
                <span class="top"><strong>Bild #1</strong><br />Beskrivning...</span>
            </li>
            <li class="sliderImage">
                <img src="assets/gallery/2.jpg" alt="Bild 2" />
                <span class="top"><strong>Bild #2</strong><br />Beskrivning...</span>
            </li>
            <li class="sliderImage">
                <img src="assets/gallery/3.jpg" alt="Bild 3" />
                <span class="top"><strong>Bild #3</strong><br />Beskrivning...</span>
            </li>
            <li class="sliderImage">
                <img src="assets/gallery/4.jpg" alt="Bild 4" />
                <span class="top"><strong>Bild #4</strong><br />Beskrivning...</span>
            </li>
            <li class="sliderImage">
                <img src="assets/gallery/5.jpg" alt="Bild 5" />
                <span class="top"><strong>Bild #5</strong><br />Beskrivning...</span>
            </li>
            <div class="clear sliderImage"></div>
        </ul>
      </div>

        <!--end slider --> 

  <footer>

    <a href="#" target="_blank"><img src="assets/images/facebook.png" alt="Facebook" /></a>
    <a href="#" target="_blank"><img src="assets/images/twitter.png" alt="Twitter" /></a> 

  </footer>
</div>




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="assets/scripts/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="assets/scripts/jquery.scrollTo-1.4.2-min.js"></script> 
<script type="text/javascript" src="assets/scripts/waypoints.min.js"></script> 
<script type="text/javascript" src="assets/scripts/navbar.js"></script> 
<script type="text/javascript" src="assets/scripts/functions.js"></script>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>

</body>
</html>
user2104321
  • 17
  • 1
  • 10
  • Why are you using both?You should only use one and you should be using only one and you should be using the most updated one and al these should be declared in the element in the html portion of your code – alvinarul Jun 10 '13 at 09:44
  • AlvinArulselvan I have tried that and the slider doesn't work... I wonder if it is some variable problem? – user2104321 Jun 10 '13 at 10:06

2 Answers2

0

The solution is to not load both. All you should need is the one loaded for the menu, and the slider will use it too.

Put it in the <head> section of your source to ensure it's loaded when your two plugins need it.

MartinAronsen
  • 23
  • 5
  • Hi there! I already tried that and when I take out the slider google api script, it stops working. BTW, the java is loading on the bottom of the page. Does that make difference? (sorry if it is a dumb question!) – user2104321 Jun 10 '13 at 10:07
  • Add the relevant parts of your HTML source in your post. – MartinAronsen Jun 10 '13 at 10:46
  • The code you've posted there is not the one with two jQuery libraries loaded. – MartinAronsen Jun 10 '13 at 21:04
  • You're right. I'm sorry! But this is because I was already on my way to solve the situation with another method: To add an img slider without jquery. But the code is updated now! If you wish to point out a solutionfor future references I would still be much appreciated! – user2104321 Jun 11 '13 at 05:35
0

Like Martin has said,put the script in the tag of the HTML or it'll execute AFTER the HTML DOM is run.

A code snippet is below... 

    <!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title> </title>

        <link rel="stylesheet" type="text/css" href="assets/styles/style.css" media="screen" />

        <link rel="stylesheet" type="text/css" href="assets/styles/jquery.fancybox-1.3.4.css" media="screen" />

        <link rel="stylesheet" type="text/css" href="assets/styles/imgsldr.css" media="screen" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
        <script type="text/javascript" src="assets/scripts/jquery.fancybox-1.3.4.pack.js"></script> 
        <script type="text/javascript" src="assets/scripts/jquery.scrollTo-1.4.2-min.js"></script> 
        <script type="text/javascript" src="assets/scripts/waypoints.min.js"></script> 
        <script type="text/javascript" src="assets/scripts/navbar.js"></script> 
        <script type="text/javascript" src="assets/scripts/functions.js"></script>
        <script type="text/javascript" src="assets/scripts/s3Slider.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('#slider').s3Slider({
                    timeOut: 3000
                });
            });
        </script>

        <!--[if lt IE 9]><script type="text/javascript" src="assets/scripts/modernizr.js"></script><![endif]-->
        </head>
        <body>

//Continue Rest of your code here...
alvinarul
  • 301
  • 4
  • 15
  • So you meant that I should put the – user2104321 Jun 11 '13 at 05:38
  • Yes,that is true if you want page loading to be snappy and let the DOM load first.It is the recommended way as well to place it at the bottom but for debugging purposes,you want to see if your jQuery does execute ASAP so putting it in the head will load it first. – alvinarul Jun 11 '13 at 06:07
  • Here's a good discussion on the matter http://stackoverflow.com/questions/3037725/is-it-wrong-to-place-the-script-tag-after-the-body-tag – alvinarul Jun 11 '13 at 06:09