JQuery - Scrolling Content

ttmt · October 23, 2010, 2:47pm

Hi all

I’m new to JQuery / Javascript and this is my first script.

I have this demo site here

http://www.ttmt.org.uk/forum/portfolio/#

It’s a simple div with overflow:hidden this containing div houses 3 divs each containing different content. The nav at the top scrolls the divs to show the div relating to the nav clicked.

The problem I have is with the last btn - Planes.
The div containing the planes photos doesn’t scroll to the top of the containing div but sits at the bottom.

The first two btns. work as expected so I don’t understand why the last btn doesn’t.

Any help would be greatly appreciated.


<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
	<script type="text/javascript" >
	
	  $(function(){
      var $content = $('#content');
      $('#flora').click(function() {
        var floraPos = $('#content #photo').position();
        var scrollPosition = $content.scrollTop() + floraPos.top;
        $('#content').animate({scrollTop: scrollPosition}, 500);
      });
      $('#beach').click(function() {
        var beachPos = $('#content #photo1').position();
        var scrollPosition = $content.scrollTop() + beachPos.top;
        $('#content').animate({scrollTop: scrollPosition}, 500);
      });
      $('#plane').click(function() {
        var planePos = $('#content #photo2').position();
        var scrollPosition = $content.scrollTop() + planePos.top;
        $('#content').animate({scrollTop: scrollPosition}, 500);
      });
    })
    
	</script>
  <style type="text/css" media="screen">
    *{
      margin:0;
      padding:0;
    }

    div#wrap{
      width:600px;
      margin:50px auto;
    }

    div#header{
      text-align:center;
      margin-bottom:30px;
    }

    div#header h1{
      font:bold 2em/1em Helvetica;
      color:gray;
      border-bottom:1px dotted gray;
      padding-bottom:10px;
    }

    div#header a{
      font:bold 1em Helvetica;
      color:gray;
      text-decoration:none;
      padding:.7em;
    }

    div#header a:hover{
      color:#00CED1;
    }

    div#header li.it a{
      font-style:italic;
    }

    div#header li.it a:hover{
      color:black;
    }

    div#header ul{
      padding-top:10px;
    }
    
    div#photo,
    div#photo1,
    div#photo2{
      float:left;
      width:600px;
    }
    
    div#header ul,
    div#photo ul,
    div#photo1 ul,
    div#photo2 ul{
      list-style:none;
    }

    div#header ul li,
    div#photo ul li,
    div#photo1 ul li,
    div#photo2 ul li{
      display:inline;
    }
    div#content{
      width:600px;
      height:550px;
      overflow:hidden;
      position:relative;
    }
    div#photo ul li img,
    div#photo1 ul li img,
    div#photo2 ul li img{
      display:inline;
      filter:alpha(opacity=30);
    	-moz-opacity:0.3;
    	-khtml-opacity: 0.3;
    	opacity: 0.3;
    }

    div#photo ul li img:hover,
    div#photo1 ul li img:hover,
    div#photo2 ul li img:hover{
      	filter:alpha(opacity=100);
      	-moz-opacity:1;
      	-khtml-opacity: 1;
      	opacity: 1;
    }
    
    div#photo,
    div#photo1,
    div#photo2{
      margin-bottom:300px;
    }
    
    div#photo2 img{
      height:100px;
      width:auto;
    }
  </style>
</head>

<body>
  <div id="wrap">
    <div id="header">
      <h1>Portfolio</h1>
      
      <ul>
        <li><a href="#" id="flora">Flora</a></li>
        <li><a href="#" id="beach">Beach</a></li>
        <li><a href="#" id="plane">Planes</a></li>
      </ul>
      
    </div><!-- #header -->
    <div id="content">
      <div id="photo">
        <ul>
          <li><a href="#"><img src="images/flora/01_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/02_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/03_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/04_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/05_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/06_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/07_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/08_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/09_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/10_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/11_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/12_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/13_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/14_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/15_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/16_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/17_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/18_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/19_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/20_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/21_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/22_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/23_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/24_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/flora/25_th.jpg" alt="" /></a></li>
        </ul>
      </div>
      <div id="photo1">
        <ul>
          <li><a href="#"><img src="images/beach/01_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/02_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/03_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/04_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/05_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/06_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/07_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/08_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/09_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/10_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/11_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/12_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/13_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/beach/14_th.jpg" alt="" /></a></li>
        </ul>
      </div><!-- #photo1 -->
      <div id="photo2">
        <ul>
          <li><a href="#"><img src="images/plane/01_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/02_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/03_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/04_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/05_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/06_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/07_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/08_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/09_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/10_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/11_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/12_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/13_th.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/plane/14_th.jpg" alt="" /></a></li>
        </ul>
      </div><!-- #photo1 -->
      
    </div><!-- #content -->
  </div><!-- #wrap -->

</body>
</html>

clairs · October 24, 2010, 1:03am

It looks like the problem is that the bottom div (#photo2) isn’t as high as the container, so the browser stops

I think the best/quickest fix here would be to give the three divs a minimum height which matches the container:


#content div {
min-height: 550px;
}

ttmt · October 24, 2010, 12:41pm

That did it thanks