Develop Reference

PDF Type view using html and css. Page overflow problem

I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here

You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}

What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page

Making a div scrollable inside a resizeable container div

I am trying to make a div that looks like the MS Windows Command Prompt.
The div is resizeable, and has two children: a title-bar div, and a content div.
I want the content div to get scrollbars when it is larger than the window div. I want the title-bar to always be visible and not scroll, and not to be on top of the scroll bars.
http://www.webdevout.net/test?0vL interactively demonstrates my problem. Click on the content text and new rows get added. When enough rows are added for scroll bars to appear, they do not.
The content div has overflow:auto set.
Setting max-height or height on the content to 100% does not work because 100% doesn't account for the title-bar height, so the scrollbars appear after some rows have gone off the bottom. Also, the scrollbars, when they appear, obscure the draggable thumb on the outer div, stopping it being resizeable :(

Just change your resizable window to the child 'content' <div>. that way you're resizing the child <div> and the parent <div> resizes automatically to hold its contents.
Also, not sure if it was intentional but you have <div id ="Content" class="Content"> in your html and .Frame>.Contents { in your CSS (note the word content has an 's' in the CSS).
I believe this is what you're looking for:
http://www.webdevout.net/test?0wE

Add the following CSS:
.Content {
overflow: auto;
height: inherit;
}
Here you go: http://www.webdevout.net/test?0v-
Cheers ;)

I assume your HTML tree looks like:
Dialog
Title bar
Content
To make the Content scrollable, use the overflow CSS property
.content {
overflow: auto;
height: inherit;
}

Add the CSS property
overflow:auto;

Just add this to your CSS
overflow: auto;

overflow:hidden but let the content auto-scroll

I have a div where content is appended periodically to it via query's append(). As the content gets longer, it will eventually overflow the div. I want no scrollbars to appear when overflowed, but still have the content scroll up to show the new content below.
Is this possible? When I use overflow-x: hidden no scrollbar appears but the content is hidden.

If the size of the container is fixed, you could place the content inside an absolutely positioned wrap like so:
<div class="container">
<div class="wrap">
<p>bah</p>
</div>
</div>
and css:
.container {
y-overflow: hidden;
position: relative;
height: 200px;
width: 200px;
}
.wrap {position:absolute; bottom: 0; left:0;right:0;
}
http://jsfiddle.net/sXGd9/

append() will add to content at the end. You may want to prepend() new content, so the data get added before the old content.
As for overflow, you can set it to scroll so that scrollbars appear if necessary, or hidden so no scrollbars will appear but the content won't be visible. Otherwise you can set it to visible so it will be visible but the scrollbars won't appear.
Do you want the overflowed content to be visible? If so set the overflow: visible otherwise set overflow: hidden (because you don't want scrollbars).
Anyway with this you wan't be able to scroll the content. If you need to scroll you have to build your own scroll system, adding event handler to your container.

If you have each appended content in your "#container" div wrapped in a seperate ".append" div you can do something like:
var pos = $('#container div:last').position();
$('#container').scrollTop(pos.top);
Is this helpfull?
Other solutions can be found in earlier post:
How do I scroll a row of a table into view (element.scrollintoView) using jQuery?

jQuery hide() targeting <p> element hides background of entire parent div

I have a simple blog page - a list of posts that each consist of a title and contents. When the page loads I want all posts' contents hidden until their titles are clicked. The following code accomplishes this but with an unwanted side effect - the on-page-load hide() function that hides each post's content also hides the background of the containing (id="content") div:
Relevant JavaScripts:
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Summary of blog page:
<section class="grid_7">
<div id="content">
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
</section>
Relevant CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('../images/content_background.jpg');
}
When the page loads the list of titles displays without the #content parent div's background. However when I click on a post's title the #content div's background shows up behind all posts up to and including that one.
Any idea what's going on?

It sound like you have some CSS that applies to the blog_head elements, that makes them float, for example:
.blog_post { float: left; }
In that case, the reason that the background doesn't show up is that the height of the content div is zero. A floating element doesn't affect the size of its parent, and when the content div only contains the headers, the height becomes zero. The background is still there, but there is no area where it's visible.
Add an overflow to the content div, that will make it contain its children:
#content { overflow: hidden; }
Note that this will not hide anything as long as you don't specify a size for the content element, it will just change how it's rendered so that it will become a container for its children.

A bit of a stab in the dark: Your #content div will, of course, be a lot shorter as the blog posts aren't there, basically consisting just of the divs with the titles. Perhaps that's the problem.
Does the image have a blank (or subtle) bit at the top or something, so that it's only apparent that it's there when there's more content in the #content div (e.g., when it's taller)? Or is there some other reason you can see that when #content is really short, you wouldn't see the background on the part of it that's there? (You can use the debugging tools in most modern browsers to see what the dimensions of the #content div are when the paragraphs are hidden; or slap a border on it temporarily, but tools these days are pretty good.)
Basically, since the jQuery doesn't, of course, actually hide the background, it must be a side-effect of the paragraphs being hidden — because of the effect that has on the dimensions of the #content div.

This is working fine for me:
HTML:
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('http://bluebackground.com/__oneclick_uploads/2008/04/blue_background_03.jpg');
}
JS
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Check it live here: Jsfiddle example

Show div with jQuery. css question

I have three divs with display: inline-block. In every div i have div with display: none when im trying to show hiding div with $('#div-id').show(1000) nearest divs 'jump around'
What should i change? I do like to see div under div just draw and the left or right div doesn't change his place.
For example two divs with my problem there (hide div shows up onchange in the textbox)

http://jsfiddle.net/WZCJu/13/
I added this CSS:
#amount-div, #specific-div {
width: 300px;
vertical-align: top
}
Version without the width, you may like it better:
http://jsfiddle.net/WZCJu/15/

Try using css's visibility property instead since it retains the element's position in the flow.
Docs: http://www.w3schools.com/css/pr_class_visibility.asp
Example:
<div id="herp" style="width: 100px; height: 40px; visibility: hidden;">plarp</div>
<div id="derp" style="width: 100px; height: 40px; visibility: visible;">slarp</div>

If you change the divs to use float: left; with a specified width you can avoid the "jump around".
See my updated example at: http://jsfiddle.net/WZCJu/12/
I changed the following:
<div id="amount-div" style="display:inline-block;">
...
<div id="specific-div" style="display:inline-block;">
To use floats with a specified width.
<div id="amount-div" style="float:left;width:220px;">
...
<div id="specific-div" style="float:left;width:220px;">
I also changed the <br> tag which preceeds the submit button so that it will clear the floated divs like so (though, there are better ways of handling that in my opinion):
<br style="clear:both">

display none removes the element completely from the document. there wont be any space reserved for it. so when u bring it back(show) it ll rearrange the nearby divs. so try using visibility:hidden which will retain the space but keep the div hidden..

Changing an HTML element from display: none to display: block or some other value will always cause it to change the flow of other elements around it in the tree. To prevent the DIVs from jumping around, you have a few options. Here are a couple simple ones:
First, you could "pad" the DIV in another DIV with a fixed size. For example:
<div style="width: 100%; height: 2em;">
<div id="js-amount" style="display: none">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
</div>
Secondly, you could use absolute positioning to remove your DIV from the flow of the document:
<div id="js-amount" style="display: none; position: absolute; top: 200px; left: 50px;">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>

You must set a fixed size for your divs, so when the new one appears, it's constrained with the given side. I updated your JSFiddle : http://jsfiddle.net/WZCJu/16/
Have a look at how I constrain the size for your divs in the CSS. To improve layout, I took the liberty to add some styling to the submit button, so the HTML is a little bit modified too.
If you have any trouble understanding my solution, ask some questions.

When using display: none, the element does not render at all so it doesn't use any space on the rendered web page. I think you might want to use visibility:hidden to hide your element but still make the space usage calculation.
EDIT: It appears jQuery method works only on the display style so my answer is not applicable and indeed a fixed offset is necessary to avoid side effects in the page flow.