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.
Related
I have 2 divs on a page and the first div has text content only.
Currently, when the content of the first div overflows it gets truncated since the CSS for the first div is:
.one {
overflow: hidden
width: 100%;
white-space: nowrap;
}
But on an overflow, could I make the overflow text appear in a 2nd div?
For example, let's say the text content in the first div is "Hello there" and it displays "Hello" but "there" is cut off because of overflow hidden, can I make "there" appear in a 2nd div?
I'm sure this is not out the box behaviour but I wondered if its possible or if anyone knows a lib to do this. Thanks.
The native capacities of CSS do not allow for this kind of behaviour, since it is quite special.
If you want to manipulate the text so that it gets displayed in different parts of your DOM, depending on a determinate critera, you will have to use Javascript to do so.
Use Javascript to create a kind of parser that detects if the text matches the criteria needed to separate them, and if it does so, manipulate the content so that it is displayed in the correct element.
EDIT:
If what you are trying to do, though, is basically format differently the first line from the rest of the text, what you might need is simple the ::fist-line pseudoselector.
This way you can set the first line to have a determinate size, color, etc.Notice though that only a certain amount of properties can be applied to this selector.
I had this exact problem tonight. I have 2 divs side by side, I want the text of the first div to spill over into the 2nd div if needed. I solved it with z-index, make the div with the text that spills out have a higher z-index than the adjacent one that you want to spill over.
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?
I have a div with fixed width and height, overflow: scroll and position: relative. Inside I have two table elements, first one containing 10 columns, and the second one which is a copy of the first table and has its first 3 columns only. I gave position:absolute to the second table and given that both tables have save styling the second table will overlap the first one. My requirement is when the div is scrolled horizontally, I want the second table which is overlapping the first one to be fixed, i.e, it should not move on horizontal scroll, and on vertical scroll the content of second table should be scrolled properly.
I have created the following fiddle with what I have so far:
JS Fiddle
I don't think that's possible with css. What you are asking is for the left hand table to scroll vertically with it's container div, but not to scroll horizontally.
I'd have a re-think on your requirements here.
You could just put the right hand table inside a div with overflow:scroll, so only that one moves when you scroll horizontally. You'd have the issue then of the two no longer being lined up when you scroll vertically - could you make it high enough so so the whole table displays? Would that work for you?
EDIT:
In your js-fiddle then you've set height:500px; for .container.
If you don't need that, then remove it so things will set their own height and display the whole table. Then you only have the sideways scroll to deal with, and that's doable (e.g. put a wrapper on the right hand table only that has overflow:scroll)
No I'd not use position:fixed here, that sets something relative to the browser window, which is no good for users scrolling up and down.
have a look at this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
that's great to get your head around css positioning.
I'm writing some code that wraps various content into columns of text (and images, videos, etc). The code works fine, but due to the algorithm I'm using it's rather slow, specifically this general logic:
add something (text for this example) to a column
check to see if column.scrollHeight > column.offsetHeight (this requires a DOM reflow)
if yes, start to binary split the text until it's shorter
Basically my issue is that I'm adding an unknown amount of text to a column, so after each chunk of text I check the column's scroll height which requires the browser to actively reflow the DOM in order to give me the correct scrollHeight. So I have 50-100 or more reflows in order to properly lay everything out.
Any general ideas on how to avoid most of these?
You could render the content multiple times. Since the first time would cache it, this should be fairly fast. The reason for the multiple rendering would be as follows.
Render the original content in a hidden area
Check to see what the column width is compared to content
Overlay the content over the column, but beneath the page. This
will cut off part of the content that is overflowing. You can accomplish with
z-indexing or with overflow: hidden;
Based on what the check from step 2 was, overlay a copy of the content with
the calculated offset in the next column in the same fashion, hiding the
extra content.
Keep track of the rendered content versus total content so you can tell how many
columns you need to do this to if there are multiple columns.
Maybe this is the same thing Travis J is suggesting, but I'm not sure, I don't quite understand his solution.
You could render everything first, on a single column, then loop through the elements top-down to know when to split, based on your desired column height versus each element's offsetTop plus height. When you find an element to break at, cache its position and go on. At the end you should have an array with the list of elements to break at, so you can actually split the content in columns.
Does this make any sense to you?
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;
}