SitePoint Sponsor

User Tag List

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

    jQuery - Scrolling browser Window

    jQuery - Scrolling browser Window

    Hi all

    I have two demos of scrolling page content with jQuery.

    This one - http://www.ttmt.org.uk/forum/2_scroll/index1.html#
    is scrolling the contents inside a container and it works as I wanted on Mac/PC

    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>
    	<style type="text/css">
    	 *{margin:0;padding:0;}
    
       div#wrap{width:600px;margin:50px auto;}
       
       div#header{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:red;}
    
       div#header ul{padding-top:10px;}
    
       .section{height:600px;margin-bottom:0px; margin-bottom:20px;}
       
       .section h2{color:white; padding:20px;}
    
       div#header ul li,.section ul li{display:inline;}
       
       div#content{width:600px;height:550px;overflow:hidden;position:relative;}
       
      #one{background:gold;}
      #two{background:red;}
      #three{background:gray;}
      
    	</style>
    </head>
    
    <body>
      <div id="wrap">
        <div id="header">
          
          <ul>
            <li><a href="#" id="flora" onclick="slideContent('#one')">One</a></li>
            <li><a href="#" id="beach" onclick="slideContent('#two')">Two</a></li>
            <li><a href="#" id="gates" onclick="slideContent('#three')">Three</a></li>
            
          </ul>
          
        </div><!-- #header -->
        <div id="content">
          <div id="one" class="section"><h2>One</h2></div>
          
          <div id="two" class="section"><h2>Two</h2></div>
          
          <div id="three" class="section"><h2>Three</h2></div>
                
        </div><!-- #content -->
      </div><!-- #wrap -->
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
      <script>
      function slideContent(div){
         var $content = $('#content');
         var divPos = $('#content ' + div).position();
         var scrollPosition = $content.scrollTop()+divPos.top;
         $('#content').animate({scrollTop: scrollPosition}, 500);
      }    
      </script>
      
    </body>
    </html>
    I need the same effect as above but I need to scroll the whole browser window.
    I have a demo here - http://www.ttmt.org.uk/forum/2_scroll/#

    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>
    	<style type="text/css">
    	 html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
       small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
       table, caption, tbody, tfoot, thead, tr, th, td {
       	margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;
       }
       body {line-height: 1;font-family:Helvetica, sans-serif;}
       
       ol, ul {list-style: none;}
       
       a{
         text-decoration:none;
       }
       #pageWrap{
         width:1200px;
       }
       #leftCol{
         float:left;
         width:300px;
         position:fixed;
       }
       #rightCol{
         margin-left:300px;
         width:900px;
         overflow:hidden;
         position:relative;
       }
       /*
       --leftCol---*/
       #leftCol{
         position:fixed;
       }
       #leftCol ul{
         margin:30px 0 0 40px;
       }
    
       #leftCol li a{
         display:block;
         color:#b2b2b2;
         padding:6px 5px;
         margin-bottom:2px;
         width:150px;
         font-weight:bold;
       }
       #leftCol li a:hover{
         color:red;
       }
       /*
       --righCol----*/
       .section{
         margin-bottom:30px;
       }
       .section h2{
         font-size:2em;
         color:white;
         padding:20px;
       }
       #one{
         height:600px;
         background:gold;
       }
       #two{
         height:800px;
         background:red;
       }
       #three{
         height:800px;
         background:gray;
       }
       
    	</style>
    </head>
    
    <body>
      <div id="pageWrap">
        <div id="leftCol">
          <ul>
            <li><a href="#" onclick="slideContent('#one')">One</a></li>
            <li><a href="#" onclick="slideContent('#two')">Two</a></li>
            <li><a href="#" onclick="slideContent('#three')">Three</a></li>
          </ul>
        </div><!-- #nav -->
        
        <div id="rightCol">
          <div id="one"class="section">
            <h2>One</h2>
          </div>  
        
          <div id="two" class="section">
            <h2>Two</h2>
          </div>
          
          <div id="three" class="section">
            <h2>Three</h2>
          </div>  
          
        </div><!--#rightCol-->
      </div><!--#pageWrap-->
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
      <script>
        
        function slideContent(div){
          var $body = $('html,body');
          var divPos = $(div).position();
          var scrollPosition = $body.scrollTop()+divPos.top;
          $('html,body').animate({scrollTop: scrollPosition}, 500);
        }
        
      </script>
      
      
    </body>
    </html>
    Problem here is on the Mac the transition are jumpy and it seems to flash the
    first yellow div before sliding up or down.
    Testing on a PC it will slide down but won't slide up.

    How can I get the whole browser window to slide up and down with a smooth transition.

  2. #2
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got it working on the PC now but it's still flashing something on the scrolling.

    http://www.ttmt.org.uk/forum/2_scroll/#

    Going from one to two or one to three the scrolling is fine but scrolling back up the first yellow div flashes up before it scrolls. If you select three and then click three again you can see the yellow div flash up.

    any help on this 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>
    	<style type="text/css">
    	 html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
       small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
       table, caption, tbody, tfoot, thead, tr, th, td {
       	margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;
       }
       body {line-height: 1;font-family:Helvetica, sans-serif;}
       
       ol, ul {list-style: none;}
       
       a{
         text-decoration:none;
       }
       #pageWrap{
         width:1200px;
       }
       #leftCol{
         float:left;
         width:300px;
         position:fixed;
       }
       #rightCol{
         margin-left:300px;
         width:900px;
         overflow:hidden;
         position:relative;
       }
       /*
       --leftCol---*/
       #leftCol{
         position:fixed;
       }
       #leftCol ul{
         margin:30px 0 0 40px;
       }
    
       #leftCol li a{
         display:block;
         color:#b2b2b2;
         padding:6px 5px;
         margin-bottom:2px;
         width:150px;
         font-weight:bold;
       }
       #leftCol li a:hover{
         color:red;
       }
       /*
       --righCol----*/
       .section{
         margin-bottom:30px;
       }
       .section h2{
         font-size:2em;
         color:white;
         padding:20px;
       }
       #one{
         height:600px;
         background:gold;
       }
       #two{
         height:800px;
         background:red;
       }
       #three{
         height:800px;
         background:gray;
       }
       
    	</style>
    </head>
    
    <body>
      <div id="pageWrap">
        <div id="leftCol">
          <ul>
            <li><a href="#" onclick="slideContent('#one')">One</a></li>
            <li><a href="#" onclick="slideContent('#two')">Two</a></li>
            <li><a href="#" onclick="slideContent('#three')">Three</a></li>
          </ul>
        </div><!-- #nav -->
        
        <div id="rightCol">
          <div id="one"class="section">
            <h2>One</h2>
          </div>  
        
          <div id="two" class="section">
            <h2>Two</h2>
          </div>
          
          <div id="three" class="section">
            <h2>Three</h2>
          </div>  
          
        </div><!--#rightCol-->
      </div><!--#pageWrap-->
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
      <script>
        
        function slideContent(div){
          var $body = $('html,body');
          var divPos = $(div).position();
          var scrollPosition = $body.scrollTop()+divPos.top;
          $('html,body').animate({scrollTop: scrollPosition}, 500);
        }
        
      </script>
      
      
    </body>
    </html>


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
  •