Height of invisible objects, when they become visible, in javascript

Question

I have a table that represents Tab-structure.
Some cells are set to display: none; and only the active tab is displayed. I want to set the max-height to all of them. To do it, I go through the array of tabs and do the following

// get the max-tab-height
for (var i = 0; i < TabPageList.length; i++)
{
    // get max height
    if (TabPageList[i].offsetHeight>MaxTabHeight)
        MaxTabHeight = TabPageList[i].offsetHeight;        
}

The problem with this approach is that offsetHeight is working only for the active tab that is displayed. So, what's the Height of the ones that are not shown, when they will be shown?

Answer 1

Because the inactive tabs are set to display:none, the offsetHeight is not useful. Try running your MaxTabHeight routine at the same time that you activate the tab, after it is made visible. I'm assuming that's inside the tab's click event.

Answer 2

Try using visibility:hidden (not display:none). As I recall, using visibility elements are just hidden but keep their dimensions.

Answer 3

For usability, the tabs shouldn't be set to hidden with CSS. (There are still the small percentage out there that has js disabled). If you run through the tabs, reading their height, while hiding them, you can easily find the tallest tab. And at the same time make your site more user-friendly (:

And if you don't want the hidden cells to collapse, you could also use visibility:hidden; like stated above.

Answer 4

As the others have said you may get the height by setting the visibility to hidden (which makes the object keep its dimensions while hidden):

visibility:hidden;

with the additional trick of setting its position to absolute to avoid it taking space on the page (you may do this just for the time needed to get at the height, restoring its position attribute afterward).

A second approach may be to keep the tab visible but move it off the page by setting its absolute position to some sufficiently large coordinates.