jquery: is there a way to guess height before rendering?

Question

Here's my code:

First I assign some htm code where there's a table in it.
(the table is not visible)
then I dump the height: it is 0 for each row.
then I fadeIn() the table
then I dump the height: it is 320px for each row.

Have you any idea how I could do to compute height before rendering?

My goal is to "cut" some information in the rows if their height is too big.

  $('#tableau').html(htm);
  $('.tableau tr td').each(function() {
    console.log($(this).height());
  } );
  $('#wait').queue(function() {
    $('#tableau').fadeIn(100).queue(function() {
        $('.tableau tr td').each(function() { console.log($(this).height()); } );
      }   
    );  
  });

I know it sounds like here but it's not exactly the same problem.

Thank you!

score 4 · Accepted Answer · answered Oct 28 '11 at 11:08

It's not possible to get the height before rendering. You've got three options:

Render all elements at once, then get the height.
Append one element, check the height, and assume this height to be the same for each consecutive element.
A very different approach: Add max-height: 100px (example) to the selector of your element.

score 3 · Answer 2 · answered Oct 28 '11 at 11:17

You might try rending the content offscreen, where it's not visible. So put it in a div that is positioned absolutely, and move it left 10,000 pixels. Then render, and check the height of each. The content is still being rendered so it doesn't fully meet your requirement, but it won't be visible. You can then adjust, and finally move the content onto the screen.

jquery: is there a way to guess height before rendering?

2 Answers2