Forums

bogus

Hello all and Hello CSS-Tricks forums!

Ugs, what a post title..

Ok, I'm building a blog theme with a fullscreen image background in every post. This is what i have so far.

Now, when I click the archive button I want the Post+fullscreen image to scroll up (which i've done with jquery) to get to the posts overview. The overview thumbnails are displayed using masonry. But I need the overview page to be scrollable in order to see all posts there. I'd like to have the posts lazyloaded later. How can I get the overview page to be scrollable while the post page is not?

Oh and basically I'm a newbie to all the markup stuff and i'm really inexperienced so maybe my code is well, not so good sometimes. I'd be glad for every hint i get to make things better.

Thanks a lot in advance!

HugoGiraudel

The problem comes from the fact thumbnails are absolutely positioned. This means they are out of the flow, and that's why you can't scroll down. Because, from the browser point of view, there is nothing to scroll.

Hompimpa

Just set the #container to be overflow:auto:

#container {overflow:auto}

Then, with JQuery, set the container height to be same with the window height:

$(window).on("resize", function() {
     $('#container').css('height', $(this).height());
}).trigger("resize");

bogus

tried it but can't get it to work. I have no clue how to fix that..

Maybe there is a way of doing this in CSS only except for the moving of the image?

JoniGiuro

I got it to work by setting a fixed height to the container (500px) and overflow-y:scroll; But HugoGiraudel is right, I wouldn't absolutely position those images.

bogus

but isn't absolute image positioning demanded by masonry? and how would I have to do it with relative positioning?

Hompimpa

http://jsfiddle.net/tovic/43eG7/22/

bogus

oO wow! thank you Hompimpa. That looks fantastic.

JDS

On a side note bogus, I would change that font color. You can hardly read it on that background.

bogus

yeah it's still a mockup and far from being final. thanks nonetheless JDS

treehouse : what would you like to learn today?

Forums

[Solved] Fullscreen Not scrolling+scrolling