why add the sizer class, it seems no matter how much content is in there
it won't shrink/grow beyond 400px so you could set this on the div directly.
bmclaughlin wrote:
Hello,
I am trying to solve the following issue:
- There are 3 columns on a page.
- When the page first loads each column needs to be the same height
(say 400px) regardless of how much content will be in each column.
- The content of the column is passed in and is unknown until the page
loads.
- If a column’s content needs more height than 400px than a “read
more…” trigger needs to be added to the bottom. Clicking the “read
more…” expands the column to reveal the rest of the content.
- If a column content needs less height than 400px, the column is
still 400px tall but no “read more...” trigger gets added.
I have created some html for testing and a link to it is on the bottom
of this message.
A pass at writing out the logic of what is needed:
Determine the height of div “container” after the content is loaded.
• If the height of “container” is greater than 400px
Add class “sizer”
.sizer { overflow:hidden; height:400px; }
Allow the paragraph inside div with class of “tag” to stay
displayed (don’t do anything to it).
The link that is in the paragraph that is inside the div with the
class of “tag” becomes a show/hide trigger. When clicked, allow
“container” to be full size (remove class “sizer” ?)
When class “sizer” is added, there needs to be a way to add
something to the where the content gets cut off. It would look/act
like a truncate function.
Perhaps something that counts back 5 characters from where
it gets cut off and then add “…”
• If the height of “container” is less than 400px
Add class “sizer”
sizer { overflow:hidden; height:400px; }
This should keep a container with little or no content from
collapsing down beyond 400px.
Add class to paragraph inside div with class of “tag”. Add
“.show-none”
.show-none {display:none;}
Here is the code to work from:
http://paste.pocoo.org/show/88630/
