1

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.

Community
  • 1
  • 1
Ian Hoar
  • 1,174
  • 1
  • 19
  • 40
  • Does the solution below not work, do you need a fiddler? – SciSpear Aug 20 '12 at 13:43
  • I'll give you the correct answer, but it turned out to be other issues. The hidden element was further up the tree and was not actually affecting the proper height. It was a scope issue, although I'm sure I will reference the example below in the future. ;) – Ian Hoar Aug 20 '12 at 17:24
  • Bummer, was hoping I was going to be able to help you out more. – SciSpear Aug 20 '12 at 21:57

2 Answers2

0

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.
SciSpear
  • 2,008
  • 18
  • 18
0

use this 

$('#mytab a[href="#tab2"]').on('shown.bs.tab', function (e) {
//my tab is your tab header id and tab2 is non-active tab id
});
Shadi Hariri
  • 197
  • 16