Question

Some text has been retrieved via an AJAX call and needs to be inserted into the DOM:

$("#someInsertionPoint").append(someHtml);

someHtml might be small, so as to create a resulting height for #someInsertionPoint of 50px. Then again, there might be so much text that #someInsertionPoint ends up with a height of 300px or more in order to contain all of the text.

In cases where someHtml is lengthy, the specifications call for a truncated version of the text to be shown (with trailing ellipsis), followed by a “more…” link which when clicked, increases the height of #someInsertionPoint, in an animated way, so as to accommodate the full text.

Everything seems straight-forward with one exception: How do I determine what the height of #someInsertionPoint will be when the full text is inserted? Recall that this value will be used as an end-point for the animated height change that occurs when the user clicks the “more…” link. Some posts on StackOverflow.com indicate that the height can’t be pre-calculated; It can only be retrieved after the insertion of text is complete. This leads me to believe that my approach should be as follows:

(1) Set the visibility of someInsertionPoint to “hidden”.

(2) Insert the full text and cache the height of someInsertionPoint in a variable.

(3) Truncate the inserted text and add the ellipsis. Set the height of #someInsertionPoint to 50px.

(4) Make someInsertionPoint visible to show the truncated text at a height of 50px.

(5) When the “more…” link is clicked, the truncated text can be replaced with the full text and I can animate the height to its ideal size using the height that I cached in #2.

Is there a better way?

Thanks.

Answer 1

I think you create a problem as it is normally no problem. It is a design flaw. Simply don’t use fixed heights. If you want to autosize something use a min-height and let the content do the resizing stuff. That’s the easy way. Otherwise when you want to use fixed heights you can use a two divs (one with a fixed height) and measure the ‘ajax’ height after you insert it (it must be visible to calculate heights).

For example:

<div id="fixed" style="height:200px;overflow:hidden">
 <div id="loader">
</div>

$('#loader').html('your content');
alert($('#loader').outerHeight());

When you try this example the #fixed div will not resize when loading net content. After inserting you can measure the height and adjust the parent div #fixed if you want.

Hopes it helps