SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make only content to scroll?

    How to make on this site following. I want left "menu" to be fixed positon aswell as header and I only want the "content (menu, food whatever you call it)" to scroll. Is it possible to do that. You dont have to give me the code or write, you can give me only some example website. Or you can write a code. Or just some help.

    Thanks anyway!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It looks as though you have already implemented a sticky/fixed sidebar but your header is really too tall to be fixed as it will swallow up half the page. A lot of sites are now just swapping in a smaller version of the header to remain fixed (something like this from here) or this.

    You need to be careful with the fixed sidebar because on small screens (height-wise) the content is unreachable when it goes below the fold.

  3. #3
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    It looks as though you have already implemented a sticky/fixed sidebar but your header is really too tall to be fixed as it will swallow up half the page. A lot of sites are now just swapping in a smaller version of the header to remain fixed (something like this from here) or this.

    You need to be careful with the fixed sidebar because on small screens (height-wise) the content is unreachable when it goes below the fold.
    On small screen there is no sidebar. This sidebar right now is dynamic, it moves dynamically. But I want to do is to make positioned absolutely/fixed and when you click/select menu category, only the content will scroll.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by godfather999 View Post
    On small screen there is no sidebar.
    That's not true as if you just reduce the height of the browser the content is unreachable. I usually tile my windows to work on more than one thing at once so I never ever have my browser maximised. It's a minor issue but an annoying one for me

    This sidebar right now is dynamic, it moves dynamically. But I want to do is to make positioned absolutely/fixed and when you click/select menu category, only the content will scroll.
    The problem is that this is heavily scripted; it is not a CSS solution as such and will need help from the JS forum so I will move the thread there.

    If you just wanted the header fixed and the sidebar fixed we could do that with css but then you would never be able to reach the sidebar content because it is below the fold even when my browser is maximised. It seems you must have the dynamic (js) solution for the design that you have to work.

    You also say you want the header fixed but it depends on what you are calling the header? You would be better of just creating a sticky nav at the top as in that demo I showed. Of course this is JS territory again and not my remit.

    You need someone like @Pullo to advise or one of the other JS wizards.

    Thread moved.

  5. #5
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That's not true as if you just reduce the height of the browser the content is unreachable. I usually tile my windows to work on more than one thing at once so I never ever have my browser maximised. It's a minor issue but an annoying one for me
    Are u talking about navbar?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by godfather999 View Post
    Are u talking about navbar?
    The element called navigation-menucard. If I have the browser closed half way up then I lose the last few menu items (more if I have zoomed the text). It's a minor issue but you just need to be careful with fixed elements.

  7. #7
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The element called navigation-menucard. If I have the browser closed half way up then I lose the last few menu items (more if I have zoomed the text). It's a minor issue but you just need to be careful with fixed elements.
    Visit the site now and see what happens when you click something on that sidebar. A part disappears. Is that possible to fix in css? That "content" needs a margin-top or something like that, but Im not sure to which element.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I believe you can fix that in the JS settings as there is a variable called padding which applies a default padding to the top of the sticky box.

    e.g.
    Code:
    <script>
    jQuery(document).ready(function() {
    	jQuery('.navigation-menucard').stickySidebar({ 
    		speed: 400,
    		padding: 220,
    		constrain: true
    	});
    });
    </script>

  9. #9
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I believe you can fix that in the JS settings as there is a variable called padding which applies a default padding to the top of the sticky box.

    e.g.
    Code:
    <script>
    jQuery(document).ready(function() {
    	jQuery('.navigation-menucard').stickySidebar({ 
    		speed: 400,
    		padding: 220,
    		constrain: true
    	});
    });
    </script>
    Okay. And what about "class="page-header"". Is there a way to make it fixed and still visible?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    That page seems to have changed as the side panel is missing now?

    If you want to fix page-header then you are eating up a lot of your screen with a fixed element. You'd probably need to do something like this.

    Code:
    .canvas{
    padding:300px 0 0;
    }
    .page-header {
    top:0;
    position:fixed;
    z-index:3;
    background: url(images/bg-content.png) repeat-x 0 0;
    
    }
    .content{background:none}
    (The above code is extra not a replacement)

    Of course that will change all pages and you would need to change the sidebar again (wherever its gone to).

    I'm not sure if that's what you meant anyway.

  11. #11
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to remove .js functiion from sticky sidebar, so it wont be sticky anymore. But when I do that my mobile menu loses its function, it cant be activated. is there any way to remove that sticky function from the sidebar but at the same time keep mobile menu good and working.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I assume you removed this script:

    Code:
    <script type='text/javascript' src='http://bistro83.com/wp-content/themes/linguini/js/sticky.js?ver=3.6.1'></script>

    and then removed this section from custom.js

    Code:
    jQuery(document).ready(function() {
    	jQuery('.navigation-menucard').stickySidebar({ 
    		speed: 400,
    		padding: 0,
    		constrain: true
    	});
    });
    That would seem to work.

  13. #13
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I assume you removed this script:

    Code:
    <script type='text/javascript' src='http://bistro83.com/wp-content/themes/linguini/js/sticky.js?ver=3.6.1'></script>

    and then removed this section from custom.js

    Code:
    jQuery(document).ready(function() {
    	jQuery('.navigation-menucard').stickySidebar({ 
    		speed: 400,
    		padding: 0,
    		constrain: true
    	});
    });
    That would seem to work.
    Thanks. You are the best.

  14. #14
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another question. If you visit the site on your mobile phones, you will see it scrollable, thats because of the slider, I think. Is it possible to make overflow hidden only on homepage? Which element should I set overflow:hidden?

    You can see here if you visit the site from iPhone http://iphone4simulator.com/... Just enter url

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Can you clarify which page we are talking about as the original link seems to have gone awol

    Then we will need to know what you are trying to hide exactly and how it differs from what we see?

  16. #16
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Can you clarify which page we are talking about as the original link seems to have gone awol

    Then we will need to know what you are trying to hide exactly and how it differs from what we see?
    LINK

    Just open that link here http://iphone4simulator.com/ and you will see what Im talking about. The scroll bar will apear. How to hide that overflow, but at the same time not to affect menu?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't see the menu on the small screen display (or on the desktop at small widths).
    Edit:


    Ok, I just realised the "Select a page" text was the menu trigger and I was expecting the usual mobile menu icon.
    You won't be able to hide the overflow and have the menu work because it will get hidden. You wil just need to ensure that everything is within that page as mentioned below.


    The page scroll is mostly because you are placing the slideshow caption absolutely from the top (top:520px) and of course on small screens that too far below the fold (even on desktop).

    You should probably optimise this a little better for mobile and hide the previous and next arrows and the text.

    e.g.

    Code:
    @media only screen and (max-width:600px){
    #prevslide,#nextslide,#slidecaption{display:none!important}
    }

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    content-home doesn't seem to be doing anything either (on the home page) so try hiding that as well.

    Code:
    .home .content-home {
    display:none;
    }
    Put it in the media query if it does have a purpose on desktop.

  19. #19
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    content-home doesn't seem to be doing anything either (on the home page) so try hiding that as well.

    Code:
    .home .content-home {
    display:none;
    }
    Put it in the media query if it does have a purpose on desktop.

    I applied your changes what do you think now?

    Also I have new problem. HERE The left sidebar menu cant fit with height, one item is missing and my montitor is quite big (24" 1920*1200) so, who know what happens on 20" monitors. Do you have any idea what should I do to fix this?

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    This is the issue I mentioned originally with fixed elements

    What you could do is use a media query based on height and when the height isn't enough to display all that side menu then remove the position:fixed and just let it be a normal floated menu instead.

    Code:
    @media only screen and (max-height:900px){
    .navigation-menucard ul{position:static}
    }
    You'll have to play with the height until it fits.

    The only other alternative would be to add a scrollbar but would look messy.

    Code:
    .navigation-menucard ul {
        position: fixed;
        bottom: 61px;
        top: 346px;
        overflow: auto;
    }

  21. #21
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe something like this http://cssdeck.com/labs/stylish-webk...llbar-with-css .... Check out the scrollbars on left side, those thin and grey scrollbars. Is it possible to get something like that?

    Its working with Chrome, but Im having problem with Firefox and Explorer.

  22. #22
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, that cant be done in firefox or IE. I think the best solution would be to do that "sticky" header you were talking about

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    To be honest that side menu is so far down the page and quite tall that fixing it into position isn't the greatest of ideas.

    You had it as a sticky sidebar to start with didn't you and it was still causing problems.?

    You can add custom scrollbars but you would need to do it with js.

  24. #24
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you think of this? http://manos.malihu.gr/jquery-custom-content-scroller/

    Is it possible to use "sticky header" plugin with inital fixed header like I have now?

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by godfather999 View Post
    I haven't used that one but they are all pretty much alike. I've used the one I mentioned above and it was easy to implement but the main problem was using it on hidden elements as it didn't initialise so you had to show it first then initialise it then hide it. Otherwise it worked pretty well but be aware that many users don't like the scrollbars being changed although aesthetically it does look more pleasing in some cases.

    Is it possible to use "sticky header" plugin with inital fixed header like I have now?
    [/quote]

    I'm not sure what you mean exactly. If you only wanted to fix part of the header such as them menu (to make the page height less) then you wouldn't need a fixed header to start with because you want it to scroll away and just leave the menu.

    It may be worth you just creating a rough demo page with the header in place and try these things out in isolation so that you don't mess up the existing site. That's what I usually do when I'm trying to get something to work and to see if its useful before implementing the finer detail.


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
  •