Text Fade Out / Read More Link

[thecatguy]

How do I avoid counting height of certain css selectors in the below method?

https://css-tricks.com/text-fade-read-more/

For example, When I have a table inside a div, the height of div and table are measured separately so the ultimate height is too high.

Similar thing happens when elements float side by side on desktop vs stacked on mobile. The height of each element is counted even though they are floated, and the ultimate height is too high.

Want to only edit the js code. Would not be efficient to add classes to various elements.

Here’s my part of the code I modified slightly:

$ps = $up.find(“div,table,p,ul,ol”);

[Beverleyh]

When I have a table inside a div, the height of div and table are measured separately so the ultimate height is too high.

Maybe I don’t understand the issue but surely you only need to use the div height, and leave the inner table (child of div) out of the equation?

To help make things clearer, why don’t you make a simple demo in CodePen to show us the actual problem you’re having.

[thecatguy]

How do I leave the inner table out of the equation?

Separately, what about when the div’s floats next to each other on desktop (but stack on mobile)? It’s counting both side by side by div’s and causing the height to be too tall on desktop.

any chance you can look at this live version (scroll down to Markets area and click Read More)
https://bit.ly/2JjSNqb

JS is at
https://bit.ly/2xMntyU

[Beverleyh]

what about when the div’s floats next to each other on desktop (but stack on mobile)?

Point the JS selector to a main container/parent element and ignore the children (don’t list all the children individually)?

Just guessing though. I can’t really see much of your page via the device I’m on and I don’t fancy wading through a larger codebase in the developer console. A reduced CodePen would be easier for us so that we can see ONLY the pertinent code and edit on the fly… we can’t do that on a live site, and we’d need to be on a desktop computer to poke about at the source. Plus, we’d have to dissect and construct our own sample page in order to test edits, so…. You’ll get more helpful answers if you use CodePen, JSBin, JSFiddle or similar. Help us to help you.

[thecatguy]

here is the codepen: https://codepen.io/dannypouladian/pen/yEOmXQ

as you can see in the height of div.sidebar-box, it’s counting the div.col-sm-6 twice even though it’s floated on desktop . So the resulting height is too high.

and it’s also counting the table inside the div as part of the height.

i want to avoid labeling everything with specific classes that are measured. just want to work in the JS if possible

[Beverleyh]

As previously suggested, why not wrap the child components (the tables and what have you) in one main wrapper element and use that to calculate the height in the JS?

i want to avoid labeling everything with specific classes that are measured.

Also not sure I follow what you mean by “measured”. The divs and tables in your example have heights specified in the CSS.

[thecatguy]

That seems to work. Good idea. So I would wrap all those elements and apply overflow:auto so that it works when children are floating too.

One issue is though: after pushing Read More, and then resizing the screen to go smaller or bigger, it retains the previous height which may be too high or too small.

Separately, I wanted to avoid going back and wrapping everything those elements. I have lots of pages. Any ideas on how to tweak the formula to not count certain elements?

[Author]

Posts