SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery - Scrolling Content

    JQuery - Scrolling Content

    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.


    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" 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>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code CSS:
    #content div {
    min-height: 550px;
    }

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it thanks


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
  •