Question

I’m writing a slider plugin, but the plugin runs within Twitter Bootstrap tabs. I have read over the answer posted here:

jQuery: Get height of hidden element in jQuery

I have the following code in my plugin, but it still comes up with a height of 0 for any tabs that are not the first tab.

$(elem, this).css({'position':'absolute','visibility':'hidden','display':'block'});
heightVal = $(elemToChange, this).height();
$(elem, this).css({'position':'static','visibility':'visible','display':'none'});

console.log(heightVal); // Only correct for first tab.

Do I need to delay this somehow? The js file is included after bootstrap.

Answer 1

Looking at your code, you need to update the same element you are trying to get the height from. Looks like you make elem visible but get the height from elemToChange… when really both should be elemToChange.

$(elemToChange, this).css({'display':'block'});
heightVal = $(elemToChange, this).height();
$(elemToChange, this).css({'display':'none'});

console.log(heightVal); // Only correct for first tab.

Actually, you probably only want a display:block. Javascript is single threaded, changing display, reading the height and reverting the display should never allow a paint cycle to even execute (I believe). Also if you have extra margin, it might get lost by doing the position:absolute… This extra bit is a little dependent on the code around it, for some reason if it still does not work; provide a fiddler.

Try something like this:

var element = $(elemToChange, this).show();
heightVal = element.height();
element.hide();

console.log(heightVal); // Only correct for first tab.