0

There is a project page of two Grids, a grid that showcase images on the left side (width: 65%) and anther grid that show information about the project on the right side (width 35%).

Here is the link to a Live Preview: http://meeped.co.uk:93/portfolio/ambition-world.html

How to change the information grid that is on the right side to be fixed and scroll with the page? and to stop before hitting the footer.

Note: I have tried to change the position to Fixed, it make it scroll but the grid width keep stretching with the page and overflow the width of the page which is 1030px.

I have tried lot of JavaScript snippets to make it scroll and stop at the footer, but none worked. What would you recommend? without using a plugin.

The HTML of the page is as follows: 

        <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" /

        <meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, initial-scale=1.0" />

        <link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
        <link rel="stylesheet" type="text/css" href="../assets/css/core.css">
        <link rel="stylesheet" type="text/css" href="../assets/css/fixes.css">
        <link rel="stylesheet" type="text/css" media="screen and (max-width : 1030px)" href="../assets/css/tablets-landscape.css"/>
        <link rel="stylesheet" type="text/css" media="screen and (max-width : 770px)" href="../assets/css/tablets-portrait.css"/>
        <link rel="stylesheet" type="text/css" media="screen and (max-width : 500px)" href="../assets/css/phone.css"/>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <!--Header--><header>
            <div id="headerWrapper">
                <div id="headerContent">

                    <div id="headerLogo">
                        <a href="../index.html"><img src="../assets/elements/logo.png"/></a>
                    </div>

                    <nav><ul id="mainMenu" class="snapjs-expand-left">
                        <li><a href="../index.html">Home</a></li>
                        <li><a href="../portfolio.html">Portfolio</a>
                        <li><a href="../about.html">About Me</a></li>
                        <li><a href="../contact.html">Contact Me</a></li>
                        <li><a href="../blog.html">Blog</a></li>
                    </ul></nav>

                </div>
            </div>
        </header>

        <!--Website Content--><div id="Page">       

            <div id="secondHeader">
                <a class="secondHeader-menuButton" href="#">Menu</a>
                <p id="logo-smallScreen">LOAI Design Studio</p>
            </div>

            <div class="wrapperB">
                <div id="portfolio-projectPage" class="content">

                    <div class="imagesGrid">    


                        </div>

                    </div>  
                </div>
            </div>

            <!--Footer Section--><footer>
            <div id="footer-sectionA">
                <div class="footerContent">
                    <h3><strong>Want to get started?</strong></h3>
                    <p>I offer free, no-obligation consultation, will review your project <br> &amp; discuss ways to achieve your goals within your budget &amp; time frame.</p>
                    <p><a target="_blank" href="http://www.vcita.com/meeting_scheduler?o=YnV0dG9u&amp;s=http%3A%2F%2Fwww.loaidesign.co.uk%2F&amp;v=1afd868e">Schedule an Appointment Now</a></p>
                </div>
            </div>          
            <div id="footer-sectionB">
                <div class="footerContent">
                    <p>Copyright ©2012 LOAI Design Studio. <br> All rights reserved.<a href="../terms-and-conditions.html">Terms &amp; Conditions.</a></p>
                </div>
            </div>
            </footer>
        </div><!--The End Of The Page-->

        <!--Scripts Links-->
        <script type="text/javascript" src="../assets/libraries/jquery.js"></script>
        <script type="text/javascript" src="../assets/js/slider.js"></script>
        <script type="text/javascript" src="../assets/js/main.js"></script>
        <script src="../assets/libraries/modernizr.js"></script>
        <!--GoSquared Scripts-->
        <script type="text/javascript">
          var GoSquared = {acct: "GSN-035800-K"};
          (function(w){
            function gs(){
              w._gstc_lt = +new Date;
              var d = document, g = d.createElement("script");
              g.type = "text/javascript";
              g.src = "http://d1l6p2sc9645hc.cloudfront.net/tracker.js";
              var s = d.getElementsByTagName("script")[0];
              s.parentNode.insertBefore(g, s);
            }
            w.addEventListener ? w.addEventListener("load", gs, false) : w.attachEvent("onload", gs);
          })(window);
        </script>

    </body>
</html>

The CSS

     /*Portoflio Project Page*/
     #portfolio-projectPage{
text-align: left;
position: relative;
       }

    .imagesGrid, .detailsBox  {
display: inline-block;
vertical-align: top;
      }

    .imagesGrid {
    width: 65%;
}

.imagesGrid img{
    border: 1px solid #E8E8E8;
    margin-bottom: 10px;
}                                           

.imagesGrid p {
    border-top: 1px solid #E8E8E8;
    padding-top: 8px;
    margin: 10px 0;
}   

.imagesGrid p:first-of-type {
    border-top: none;
    padding: 0 0 10px 0;
    margin: 0;
}   

    .detailsBox {
    width: 35%;
    margin-top: 28px;
    padding-left: 45px;
}

.detailsBox p {
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 10px;
    margin: 10px 0;
}   

.detailsBox p, h3 {
    vertical-align: bottom;
}

.detailsBox a {
    vertical-align: middle;
}       

.detailsBox p:last-of-type {
    border-bottom: 3px solid #E8E8E8;
    margin: 0;
}   

.detailsBox div {
    background-color: #F5F5F5;
    padding: 15px 0;
    text-align: center;

    border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
}

.detailsBox div a{
    background-color: #E8E8E8;
    padding: 10px 14px;
    cursor: pointer;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.detailsBox div a:hover{
    color: #FFFFFF;
    background-color: #456087;
}

.detailsBox div br {
    display: none;
}

.shareButtons a {
        margin-left: 3px;

        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }

.shareButtons a span {
        display: none;
    }

Also Here is a JS I am using: 

//Scroll-up button// 
$(window).scroll(function(){ 
    if ($(this).scrollTop() > 100) { 
      $('.scrollup').fadeIn(); 
    } 
    else { 
      $('.scrollup').fadeOut(); 
    } 
 }); 
$('.scrollup').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 600); return false; 
});
Dici
  • 25,226
  • 7
  • 41
  • 82
  • `Page not found`.. ;). if you provide a link, provide one that is public – ddavison Sep 03 '13 at 14:14
  • Not exactly a "live" preview. ;) – ars265 Sep 03 '13 at 14:14
  • ah! sorry, here is the correct link: http://meeped.co.uk:93/portfolio/ambition-world.html –  Sep 03 '13 at 14:17
  • It seems you are already doing something that detects scroll with adding the "go up" link to the sidebar. Can you show the javascript doing this? Should be simply to add the positioning to that. – robooneus Sep 03 '13 at 14:18
  • indeed, it's `//Scroll-up button// $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; });` –  Sep 03 '13 at 14:19
  • I tried to apply position fixed to it and noticed some crazy things where happening (body not expanding to the bottom of the content, sidebar is too big), so I decided to validate the site and discovered that there is an error in your html: " Line 97, Column 8: Stray end tag div. " Could you please fix that error and update the page, so there's something solid we can work on? – Jonas Grumann Sep 03 '13 at 14:23
  • Thank you, indeed just did! please view the updated document above. –  Sep 03 '13 at 14:28
  • You can check this post . This is more about it . – prashant Sep 03 '13 at 14:42

1 Answers1

0

So, the issue is that, by adding position:fixed; you are positioning the sidebar relative to the viewport (which is the way fixed positioning works). This means that the width of a position:fixed; element will always be relative to the width of the viewport.

The way around this is to introduce a new wrapper element to the sidebar item and position this new element as fixed while the sidebar remains positioned normally.

Here is an example of how to do so... you want to add a wrapper once the user scrolls past (but only if the wrapper doesn't already exist), and remove the wrapper once they scroll back up (but only if it exists).

So, you can include in your JS:

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 100) { 
    $('.scrollup').fadeIn();
    if ($('.fixie').length == 0) {
      $('.detailsBox').wrap('<div class="fixie" />');
    }
  } 
  else { 
    $('.scrollup').fadeOut(); 
    if ($('.fixie').length != 0) {
      $('.detailsBox').unwrap('<div class="fixie" />');
    }
  } 
});

Then, in your CSS, you can do the fixed positioning stuff.

.fixie {
    width:1030px;
    position:fixed;
    top:100px; /* or however much you want */
    left:50%;
    margin-left:-515px;
    /* these two lines center the wrapper */
    padding:0 20px; /* to match the replaced wrapper */
}

.detailsBox {
    float:right;
}

.imagesGrid {
    float:left;
}

This should work :)

robooneus
  • 1,344
  • 8
  • 10
  • There is something wrong, it didn't work - everything got messed up mate, is it right you meant to ADD anther wrapper with class fixie before the detailsBox? –  Sep 03 '13 at 14:40
  • Aye, just tested it on the site myself. Will edit shortly once I figure out where the mistake is.. – robooneus Sep 03 '13 at 14:41
  • @Leo Edit is up. Should function now, but you can play with it to get it to work perfectly for you. The basic logic is there, however. – robooneus Sep 03 '13 at 14:52
  • The details Box keep on disspering when scrolling up. I just want the Box to scroll with the page, but the position of it, don't go overflow the width of the page which is 1030px and appear next to the images grid. Any ideas mate –  Sep 03 '13 at 15:02
  • Have you tried the above? When I do it does exactly what you are saying (at normal screen width). You can figure out all the breakpoints for the others... *I also added an extra line to fix the position of the imagesGrid* – robooneus Sep 03 '13 at 15:11