Results 1 to 8 of 8

Thread: div fixed pos x but scrolls y

  1. #1
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default div fixed pos x but scrolls y

    hi all,

    hope someone can help me out here - i have a div at the top of a page which is fixed in it's position - so when the page is scrolled either vertically or horizontally it stays right where it should be.

    but now i need it to stay fixed when the page is scrolled horizontally but to scroll with the top of the page if scrolled vertically.

    i found some code that does a similar thing, only, the other way round scrolls horizontally but stays fixed vertically - if you have a look at the code below - cut and paste it into a page and resize the window until you get the bars, you see what i mean...

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd"
    >
    <
    html lang="en">
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <
    title>Scroll Horizontally</title>

    <
    script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>

    <script>

    $(document).ready(function() {

        $('a.panel').click(function () {

            $('a.panel').removeClass('selected');
            $(this).addClass('selected');
            
            current = $(this);
            
            $('#wrapper').scrollTo($(this).attr('href'), 800);        
            
            return false;
        });

        $(window).resize(function () {
            resizePanel();
        });
        
    });

    function resizePanel() {

        width = $(window).width();
        height = $(window).height();

        mask_width = width * $('.item').length;
            
        $('#debug').html(width  + ' ' + height + ' ' + mask_width);
            
        $('#wrapper, .item').css({width: width, height: height});
        $('#mask').css({width: mask_width, height: height});
        $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
            
    }

    </script>
        <script> 
          $(window).scroll(function () {  
            $("#footwrap").css({top: -$(window).scrollTop()}); 
          }); 
        </script> 
    <style>

    body {
        height:100%;
        width:100%;
        margin:0;padding:0;
    }

    #wrapper {
        width:100%;
        height:100%;
        position:fixed;
        top:0;
        left:-1px;
        background-color:#ccc;
        overflow:auto;
    }

        #mask {
            width:500%;
            height:100%;
            background-color:#eee;
        }

        .item {
            width:20%;
            height:100%;
            float:left;
            background-color:#ddd;
        }
        
        
        .content {
            width:400px;
            height:300px;
            top:20%;
            margin:0 auto;
            background-color:#aaa;
            position:relative;
        }
        
        .selected {
            background:#fff;
            font-weight:700;
        }

        .clear {
            clear:both;
        }

    #foot {        background-color:#f00;
            padding: 0 1em; /* cosmetic, makes beginning and end of text lines more legible */
    }
    #footwrap {        background-color:#036; 
            position:fixed; 
            top:0; 
            left:0;
            width: 100%; /* Only required for IE 7, if it becomes a problem for others, make it conditional */
            z-index:100;
    }
    </style>

    </head>
    <body>
            <div id="footwrap"><br>
                  <div id="foot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui nec massa gravida elementum. Aliquam tempor vehicula augue, tempus consectetur dui sollicitudin nec. Pellentes</div>
                  <br>
              </div>

    <div id="wrapper">
        <div id="mask">

            <div id="item1" class="item">
                
                <a name="item1"></a>
        
                <div class="content">item1 
                    <a href="#item1" class="panel">1</a> | 
                    <a href="#item2" class="panel">2</a> | 
                    <a href="#item3" class="panel">3</a> | 
                    <a href="#item4" class="panel">4</a> | 
                    <a href="#item5" class="panel">5</a>
                </div>
            </div>
            
            <div id="item2" class="item">
                <a name="item2"></a>
                <div class="content">item2 <a href="#item1" class="panel">back</a></div>
            </div>
            
            <div id="item3" class="item">
                <a name="item3"></a>
                <div class="content">item3 <a href="#item1" class="panel">back</a></div>
            </div>

            <div id="item4" class="item">
                <a name="item4"></a>
                <div class="content">item4 <a href="#item1" class="panel">back</a></div>
            </div>
            
            <div id="item5" class="item">
                <a name="item5"></a>
                <div class="content">item5 <a href="#item1" class="panel">back</a></div>
            </div>

        </div>
    </div>

    </body>
    </html> 
    how do i rewrite that script so it stays put horizontally but scrolls vertically - im all googled out trying to find the correct syntax(?) for it...

    anyone know what i should be swapping scrollLeft for? (pageYOffset... i got that one) but i'm clueless on this at the moment

    hope someone feels festive enough to put me right?
    Last edited by wwfc; 12-19-2011 at 08:45 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,028
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    The style, markup and the function have all changed:

    Code:
    <!DOCTYPE html> 
    <html> 
      <head> 
        <style> 
          #footwrap { 
            background-color:#036; 
            position:fixed; 
            top:0; 
            left:0;
            width: 100%; /* Only required for IE 7, if it becomes a problem for others, make it conditional */
          } 
          #foot{ 
            background-color:#f00;
            padding: 0 1em; /* cosmetic, makes beginning and end of text lines more legible */
          } 
        </style> 
        <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
        <script> 
          $(window).scroll(function () {  
            $("#footwrap").css({top: -$(window).scrollTop()}); 
          }); 
        </script> 
      </head> 
    <body> 
        <div> 
          <div id="footwrap"><br> 
            <div id="foot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui nec massa gravida elementum. Aliquam tempor vehicula augue, tempus consectetur dui sollicitudin nec. Pellentes</div> 
    	<br>
          </div> 
          <p>Resize window so horisontal scroll bar appears, Then try scrolling</p> 
          <p>&nbsp;</p> 
          <p>&nbsp;</p> 
          <p>&nbsp;</p> 
          <p>sdsadssadsdsdasd</p> 
          <p>&nbsp;</p> 
          <p>&nbsp;</p> 
          <p>&nbsp;</p> 
          <p>&nbsp;</p> 
          <p>dsaasddasddasdasdsadasada</p> 
          <p>&nbsp;</p> 
    </div> 
    <p>___________________________________________________________________________________________________________________________</p> 
    </body> 
    </html>
    I noticed even in the version in your post that the text "Resize window so horisontal scroll bar appears, Then try scrolling" is covered. We can avoid that in this version by changing:

    Code:
        <script> 
          $(window).scroll(function () {  
            $("#footwrap").css({top: -$(window).scrollTop()}); 
          }); 
        </script>
    to:

    Code:
        <script> 
    	;(function($){
    	      function flowcontent(){
    	      	$('#spacer').css({height: $("#footwrap").height()});
    	      }
    	      $(flowcontent);
    	      $(window).bind('load resize', flowcontent).scroll(function () {  
    	        $("#footwrap").css({top: -$(window).scrollTop()}); 
    	      });
    	})(jQuery);
        </script>
    And adding a div here (highlighted):

    Code:
    <body> 
        <div> 
          <div id="footwrap"><br> 
            <div id="foot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui nec massa gravida elementum. Aliquam tempor vehicula augue, tempus consectetur dui sollicitudin nec. Pellentes</div> 
    	<br>
          </div> 
          <div id="spacer"></div>
          <p>Resize window so horizontal scroll bar appears, Then try scrolling</p>
    Last edited by jscheuer1; 12-17-2011 at 05:44 PM. Reason: minor improvements, later add - I noticed even in . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    ...perfect!

    thankyou so very much!

  4. #4
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    ...sorry, i think i spoke to soon! by itself this works perfectly but i have tried to combine it with another document and it has stopped working.

    the other document also uses jquery - 1.3.1 - i changed the ref in the code posted in john's reply and it works fine still - so it is not the version of jquery that is the problem - but i'm wondering if i need to add noconflict ref in there somewhere?

    basically i am trying to get it working with the jquery scrollto.js - and at the moment i can only get one or the other to work :-(

    here is the html - the scrollto works but not the vertical scroll bit...

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd"
    >
    <
    html lang="en">
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <
    title>Scroll Horizontally</title>

    <
    script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>

    <script>

    $(document).ready(function() {

        $('a.panel').click(function () {

            $('a.panel').removeClass('selected');
            $(this).addClass('selected');
            
            current = $(this);
            
            $('#wrapper').scrollTo($(this).attr('href'), 800);        
            
            return false;
        });

        $(window).resize(function () {
            resizePanel();
        });
        
    });

    function resizePanel() {

        width = $(window).width();
        height = $(window).height();

        mask_width = width * $('.item').length;
            
        $('#debug').html(width  + ' ' + height + ' ' + mask_width);
            
        $('#wrapper, .item').css({width: width, height: height});
        $('#mask').css({width: mask_width, height: height});
        $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
            
    }

    </script>
        <script> 
          $(window).scroll(function () {  
            $("#footwrap").css({top: -$(window).scrollTop()}); 
          }); 
        </script> 
    <style>

    body {
        height:100%;
        width:100%;
        margin:0;padding:0;
    }

    #wrapper {
        width:100%;
        height:100%;
        position:fixed;
        top:0;
        left:-1px;
        background-color:#ccc;
        overflow:auto;
    }

        #mask {
            width:500%;
            height:100%;
            background-color:#eee;
        }

        .item {
            width:20%;
            height:100%;
            float:left;
            background-color:#ddd;
        }
        
        
        .content {
            width:400px;
            height:300px;
            top:20%;
            margin:0 auto;
            background-color:#aaa;
            position:relative;
        }
        
        .selected {
            background:#fff;
            font-weight:700;
        }

        .clear {
            clear:both;
        }

    #foot {        background-color:#f00;
            padding: 0 1em; /* cosmetic, makes beginning and end of text lines more legible */
    }
    #footwrap {        background-color:#036; 
            position:fixed; 
            top:0; 
            left:0;
            width: 100%; /* Only required for IE 7, if it becomes a problem for others, make it conditional */
            z-index:100;
    }
    </style>

    </head>
    <body>
            <div id="footwrap"><br>
                  <div id="foot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui nec massa gravida elementum. Aliquam tempor vehicula augue, tempus consectetur dui sollicitudin nec. Pellentes</div>
                  <br>
              </div>

    <div id="wrapper">
        <div id="mask">

            <div id="item1" class="item">
                
                <a name="item1"></a>
        
                <div class="content">item1 
                    <a href="#item1" class="panel">1</a> | 
                    <a href="#item2" class="panel">2</a> | 
                    <a href="#item3" class="panel">3</a> | 
                    <a href="#item4" class="panel">4</a> | 
                    <a href="#item5" class="panel">5</a>
                </div>
            </div>
            
            <div id="item2" class="item">
                <a name="item2"></a>
                <div class="content">item2 <a href="#item1" class="panel">back</a></div>
            </div>
            
            <div id="item3" class="item">
                <a name="item3"></a>
                <div class="content">item3 <a href="#item1" class="panel">back</a></div>
            </div>

            <div id="item4" class="item">
                <a name="item4"></a>
                <div class="content">item4 <a href="#item1" class="panel">back</a></div>
            </div>
            
            <div id="item5" class="item">
                <a name="item5"></a>
                <div class="content">item5 <a href="#item1" class="panel">back</a></div>
            </div>

        </div>
    </div>

    </body>
    </html> 
    ...do you think it is just the noconflict ref that i need or have a i moved the goalposts by trying to combine the two things?

    the js files attached are ref's as being in a folder named "js"
    Last edited by wwfc; 12-19-2011 at 08:45 AM. Reason: forgot to include the existing .js files

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,028
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Looks like you could probably use just about any version of jQuery, from 1.3.1 on. I tried it with 1.3.1 and the latest - 1.7.1, worked in either once I made the change described below. The problem is with the resize function, there's not always anything to scroll to:

    Code:
    function resizePanel() {
    
        width = $(window).width();
        height = $(window).height();
    
        mask_width = width * $('.item').length;
            
        $('#debug').html(width  + ' ' + height + ' ' + mask_width);
            
        $('#wrapper, .item').css({width: width, height: height});
        $('#mask').css({width: mask_width, height: height});
        $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
            
    }
    This appears to fix that:

    Code:
    function resizePanel() {
    
        width = $(window).width();
        height = $(window).height();
    
        mask_width = width * $('.item').length;
            
        $('#debug').html(width  + ' ' + height + ' ' + mask_width);
            
        $('#wrapper, .item').css({width: width, height: height});
        $('#mask').css({width: mask_width, height: height});
        if($('a.selected').size()){
    	    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
        }
            
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    ...thanks for taking the time to have a look at this john, really appreciate it.

    i think i've done as you suggested - but for some reason the top is staying in a fixed position and won't scroll vertically with the page?!

    is this what you meant?

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd"
    >
    <
    html lang="en">
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <
    title>Scroll Horizontally</title>

    <
    script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>

    <script>

    $(document).ready(function() {

        $('a.panel').click(function () {

            $('a.panel').removeClass('selected');
            $(this).addClass('selected');
            
            current = $(this);
            
            $('#wrapper').scrollTo($(this).attr('href'), 800);        
            
            return false;
        });

        $(window).resize(function () {
            resizePanel();
        });
        
    });

    function resizePanel() {

        width = $(window).width();
        height = $(window).height();

        mask_width = width * $('.item').length;
            
        $('#debug').html(width  + ' ' + height + ' ' + mask_width);
            
        $('#wrapper, .item').css({width: width, height: height});
        $('#mask').css({width: mask_width, height: height});
        if($('a.selected').size()){
            $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
        }
            
    }

    </script>
        <script> 
          $(window).scroll(function () {  
            $("#footwrap").css({top: -$(window).scrollTop()}); 
          }); 
        </script> 
    <style>

    body {
        height:100%;
        width:100%;
        margin:0;padding:0;
    }

    #wrapper {
        width:100%;
        height:100%;
        position:fixed;
        top:0;
        left:-1px;
        background-color:#ccc;
        overflow:auto;
    }

        #mask {
            width:500%;
            height:100%;
            background-color:#eee;
        }

        .item {
            width:20%;
            height:100%;
            float:left;
            background-color:#ddd;
        }
        
        
        .content {
            width:400px;
            height:300px;
            top:20%;
            margin:0 auto;
            background-color:#aaa;
            position:relative;
        }
        
        .selected {
            background:#fff;
            font-weight:700;
        }

        .clear {
            clear:both;
        }

    #foot {        background-color:#f00;
            padding: 0 1em; /* cosmetic, makes beginning and end of text lines more legible */
    }
    #footwrap {        background-color:#036; 
            position:fixed; 
            top:0; 
            left:0;
            width: 100%; /* Only required for IE 7, if it becomes a problem for others, make it conditional */
            z-index:100;
    }
    </style>

    </head>
    <body>
            <div id="footwrap"><br>
                  <div id="foot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui nec massa gravida elementum. Aliquam tempor vehicula augue, tempus consectetur dui sollicitudin nec. Pellentes</div>
                  <br>
              </div>

    <div id="wrapper">
        <div id="mask">

            <div id="item1" class="item">
                
                <a name="item1"></a>
        
                <div class="content">item1 
                    <a href="#item1" class="panel">1</a> | 
                    <a href="#item2" class="panel">2</a> | 
                    <a href="#item3" class="panel">3</a> | 
                    <a href="#item4" class="panel">4</a> | 
                    <a href="#item5" class="panel">5</a>
                </div>
            </div>
            
            <div id="item2" class="item">
                <a name="item2"></a>
                <div class="content">item2 <a href="#item1" class="panel">back</a></div>
            </div>
            
            <div id="item3" class="item">
                <a name="item3"></a>
                <div class="content">item3 <a href="#item1" class="panel">back</a></div>
            </div>

            <div id="item4" class="item">
                <a name="item4"></a>
                <div class="content">item4 <a href="#item1" class="panel">back</a></div>
            </div>
            
            <div id="item5" class="item">
                <a name="item5"></a>
                <div class="content">item5 <a href="#item1" class="panel">back</a></div>
            </div>

        </div>
    </div>

    </body>
    </html> 
    i'm testing it in safari, firefox and chrome - but in each the top stays fixed at the top and won't scroll as the page gets scrolled down?

    have i got it wrong somewhere?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,028
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Yes, that's what I meant and it takes care of an error that was occurring sometimes when the window was resized. But I see now that it still doesn't move the footwrap on vertical scrolling. I was so happy to get rid of the error, I missed that. For that we need to detect the scrolling of the wrapper because this new markup makes it the element that scrolls, not the window -

    Replace:

    Code:
        <script> 
          $(window).scroll(function () {  
            $("#footwrap").css({top: -$(window).scrollTop()}); 
          }); 
        </script>
    with:

    Code:
    <script> 
    jQuery(function($){
    	$('#wrapper').scroll(function(){
    		$("#footwrap").css({top: -$('#wrapper').scrollTop()});
    	});
    });
    </script>
    But the jquery.scrollTo.js script scrolls to the top of the element unless you specify the axis. That makes the scroll state of the footwrap go back to 0 when using the jquery.scrollTo.js script's scrollTo() function. To avoid that, specify the 'x' axis in the two places scrollTo is used, here:

    Code:
            $('#wrapper').scrollTo($(this).attr('href'), 800, {axis: 'x'});
    and here:

    Code:
        if($('a.selected').size()){
    	    $('#wrapper').scrollTo($('a.selected').attr('href'), 0, {axis: 'x'});
        }
    However, there's something still a bit off and I'm not sure of the solution or if it's a real problem but there often is no vertical scrollbar. I'm thinking this is because the page tries to layout so that one isn't necessary. If the content of the items were taller, this might not be an issue. Also, sometimes the scrollbar appears to fill its track which normally signifies that no scrolling or very little scrolling can be done. When this happens it happens in cases where more scrolling than that is possible, at least to my eye. Again this might be due to the items being so short. But I think this may persist even with taller items. It can probably be lived with if it does.

    Except for subtle differences in layout, it still doesn't seem to matter which jQuery version is used. I would recommend 1.6.4 or the latest (1.7.1) though for a greater chance of compatibility with the latest browsers. Certain versions should be avoided, like early sub versions in the 1.4 and 1.6 versions. Some of those were buggier than most.

    Here's my full working code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Scroll Horizontally</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.scrollTo.js"></script>
    
    <script>
    
    $(document).ready(function() {
    
        $('a.panel').click(function () {
    
            $('a.panel').removeClass('selected');
            $(this).addClass('selected');
            
            current = $(this);
            
            $('#wrapper').scrollTo($(this).attr('href'), 800, {axis: 'x'});        
            
            return false;
        });
    
        $(window).resize(function () {
            resizePanel();
        });
        
    });
    
    function resizePanel() {
    
        width = $(window).width();
        height = $(window).height();
    
        mask_width = width * $('.item').length;
            
        $('#debug').html(width  + ' ' + height + ' ' + mask_width);
            
        $('#wrapper, .item').css({width: width, height: height});
        $('#mask').css({width: mask_width, height: height});
        if($('a.selected').size()){
    	    $('#wrapper').scrollTo($('a.selected').attr('href'), 0, {axis: 'x'});
        }
            
    }
    
    </script>
    <script> 
    jQuery(function($){
    	$('#wrapper').scroll(function(){
    		$("#footwrap").css({top: -$('#wrapper').scrollTop()});
    	});
    });
    </script> 
    <style>
    
    body {
        height:100%;
        width:100%;
        margin:0;padding:0;
    }
    
    #wrapper {
        width:100%;
        height:100%;
        position:fixed;
        top:0;
        left:-1px;
        background-color:#ccc;
        overflow:auto;
    }
    
        #mask {
            width:500%;
            height:100%;
            background-color:#eee;
        }
    
        .item {
            width:20%;
            height:100%;
            float:left;
            background-color:#ddd;
        }
        
        
        .content {
            width:400px;
            height:300px;
            top:20%;
            margin:0 auto;
            background-color:#aaa;
            position:relative;
        }
        
        .selected {
            background:#fff;
            font-weight:700;
        }
    
        .clear {
            clear:both;
        }
    
    #foot {        background-color:#f00;
            padding: 0 1em; /* cosmetic, makes beginning and end of text lines more legible */
    }
    #footwrap {        background-color:#036; 
            position:fixed; 
            top:0; 
            left:0;
            width: 100%; /* Only required for IE 7, if it becomes a problem for others, make it conditional */
            z-index:100;
    }
    </style>
    
    </head>
    <body>
            <div id="footwrap"><br>
                  <div id="foot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui nec massa gravida elementum. Aliquam tempor vehicula augue, tempus consectetur dui sollicitudin nec. Pellentes</div>
                  <br>
              </div>
    
    <div id="wrapper">
        <div id="mask">
    
            <div id="item1" class="item">
                
                <a name="item1"></a>
        
                <div class="content">item1 
                    <a href="#item1" class="panel">1</a> | 
                    <a href="#item2" class="panel">2</a> | 
                    <a href="#item3" class="panel">3</a> | 
                    <a href="#item4" class="panel">4</a> | 
                    <a href="#item5" class="panel">5</a>
                </div>
            </div>
            
            <div id="item2" class="item">
                <a name="item2"></a>
                <div class="content">item2 <a href="#item1" class="panel">back</a></div>
            </div>
            
            <div id="item3" class="item">
                <a name="item3"></a>
                <div class="content">item3 <a href="#item1" class="panel">back</a></div>
            </div>
    
            <div id="item4" class="item">
                <a name="item4"></a>
                <div class="content">item4 <a href="#item1" class="panel">back</a></div>
            </div>
            
            <div id="item5" class="item">
                <a name="item5"></a>
                <div class="content">item5 <a href="#item1" class="panel">back</a></div>
            </div>
    
        </div>
    </div>
    
    </body>
    </html>
    Last edited by jscheuer1; 12-20-2011 at 07:28 PM. Reason: English usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    wwfc (12-20-2011)

  9. #8
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    ...you just nailed it!

    i thought i might have been asking for "the moon on a stick" - but i guess it's easy when you know how!

    thankyou very much - you made it sound simple!


    good karma to you john

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
  •