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.
