I have a container div, with absolute position whose dimensions are defined by percentages of the viewport (via a few parent elements), i.e. the height is given by div {top:15%; bottom:10%}. The width is likewise defined.
I would like this div to contain text which fills the whole area without ridiculous spacings, comprising a certain number of "compulsory" paragraphs, followed by several "optional" paragraphs if there is space. The idea is that it would be arranged so that the maximum number of whole paragraphs will be displayed, and then spaced evenly to fill the div. If necessary I can have a scrolling overflow as a fall back, but I would prefer not to. I only want to include the additional information (which may include graphics) if there is space, and not to present an essay on a small screen that needs to be scrolled through.
Any ideas for a solution with CSS and/or javascript?
Related
Hoping someone can advise a good strategy for this.
I have a page I am trying to code that has five elements on it. The content of these elements will change as one uses the page ... sometimes consisting of text, sometimes images ... and importantly the height of the content will change (all built using JavaScript). The idea is that all of this will be visible on the screen at once.
The issue is that I want the elements to retain their positions on the screen (e.g., upper left, exact center, etc.) regardless of the size of the others. For example, the element in the middle may be a single line of text and may suddenly become a 300 px high image, may then become a 100 px high image. When that happens, I don't want the objects below it to move up or down.
(PS: this will only be used on a desktop computer)
Is there a way to HTML or CSS this to give these elements absolute positions (e.g., the one one in the middle: 50% from top, 50% from left, centered on the screen) regardless of the size of the others? I was previously just using line breaks and position things using line heights, but that causes elements lower on the screen to "move" down when the higher ones resize.
Any help or suggestions would be appreciated!
youc can use CSS for this, you should try with position property(relative/absolute)/ Check this out link and this link
Is there a way to select all child content beyond a certain parent height using javascript? For example: I have a two column layout with a fixed height. If the content inside column one is vertically overflowing I want to be able to move the overflowed content to column two so I need a way to select it.
I have no trouble detecting if content is overflowing using this technique but I can't figure out a way to select the overflowed content.
With javascript, you can count the number of words that fit in the first column of a two-column layout. You could do this "offscreen" -- where the user won't see it -- by making a copy of the first column just for measurement purposes. For example, give a container an absolute position that's way out of bounds (like, top: -10000px, left: -10000px). Other than the positioning, give it the exact same css (font, line-height, etc.) as the first column in your two-column layout. Using javascript, keep adding words, one at a time, to the container. After you add each word, check if the container has overflowed or not. Once you've reach that point, that's what will fit in your first column (minus the word that actually made it overflow); the rest of the string (including that word) goes into the second column.
I have this problem where I am trying to show multiple graphs (based on jsPlumb) on a single page. Since I want each graph to be side by side on one row no matter how much space is available I am using a table (if I used divs with float:left, if not enough space is available some of the divs move down on a separate row).
Now each table cell contains a main div which in turn contains two or more node-divs. The way jsPlumb works is by creating a separate div for each node. I need to position each node at a particular top/left relative to its parent div.
The problem I have is that the main graphDiv in each table cell does not expand to fit its content. Some of the graph-node divs are outside of it. I understand that when you have "absolute" positioned divs they are not taken into account. But I am using "relative" positioned divs with top/left coordinates. Does the same thing apply?
If so, what would be the best way for me to expand the table-cell/graphDiv to cover its content? (i have tried all the clear fixes and went thru all stack-overflow related posts but could not find a solution).
Here is a link to the jsfiddle page I set up: http://jsfiddle.net/7QkB2/28/
I'm a little rusty but I share your pain in trying to get divs to properly expand to contain their contents.
As explained by this page http://reference.sitepoint.com/css/relativepositioning when you use relative positioning you're actually leaving behind a hole where the content used to be. I'd think of it almost as an optical illusion - The object is still reserving an invisible block in its old position, but it appears as if it has moved.
So in your case, the 3 nodes are still stacked in the upper left corner of the graph even though they look like they're floating outside of it. If you get rid of all the absolute and relative positioning on the nodes you'll see the table is sized to be big enough to fit their original positions.
I'd recommend usually only using position relative if you're only moving your content by a few pixels. Why they designed the css to work this way is a mystery to me, but maybe its something to do with the limitations of the rendering engines? When you use position absolute the object no longer has a "box" taking up space in the document. It's easy to position, but won't affect the spacing of anything else as you observed.
I'm not sure your exact application, but you may need to get creative with how you specify the spacing. If you know the dimensions you can always specify them, but I'm guessing you're not that lucky. Do you really want to set the position relative to the top-left corner, or just relative to the other nodes? I'd probably just use old-fashioned margins. That should allow you to specify the positions of the content that needs to fit in the table while maintaining the block model. Then if you need one of the nodes to overlap, position it using absolute positioning.
Have you tried displaying each div as an inline-block and turning off line wrapping on the enclosing div? You don't have to resort to tables if you want content with a dynamic width to display horizontally without wrapping.
div.graph {
display: inline-block;
}
div.graph-container {
white-space: nowrap;
}
Is there any way to make it so divs do not get cut in half when printing multiple pages? There are divs that I am trying to print that vary in size and I would like it to print so that none of them are cut off and the full div boxes appear on a single page. Maybe there is a way to calculate the height of each div and if one puts it over the height of the page, then put it on the next page? I know I could get the length of the text within each div and maybe do it that way, but how would I go about designating a div to be printed on another page?
Use the CSS property page-break-inside:
http://www.w3.org/TR/CSS21/page.html#page-break-props
Hey, Ive got an php script dragging some images from a database and displaying them using float:left; so they go left to right.
However unless in the css i define i width for the container they jump down onto a 2nd line.
So the question IS!
How for the life of me could I get it to figure out the width of the content and then set the width attribute via javascript all on the one load.
I did have a slight worry that this wouldnt be easily possible as it wud have had to render the images/layout first to get a width before then adjusting it.
Ideas please people!! x
Your question has to do with how the flows of floats work...
If two images are floated and the sum of their widths is wider than the containing element, they will wrap (similar to the way words in a paragraph wrap).
Visual references describing the flow of "float"ed elements (way too difficult to describe in a few words):
http://css.maxdesign.com.au/floatutorial/introduction.htm