I have a jquery tab control in which I am building a custom control I've create which needs开发者_JS百科 to know the width of itself during the build process.

My problem is when put into a parent container, in this case a tab, which has a 'display: none' I am unable to calculate the width.

I've tried it both ways in my control:

$('.DataRow').width()
$('.DataRow').css('width')

both return 0.

Is there any other way to get at this width value?

I have often used this visibility: hidden technique. You can test width when visibility:hidden, but not display:none. Both hide the visibility of the element, however display:none behaves differently in that it does not take up any "space" in the DOM.

Given this markup:

<div id="parent" style="display: none">
    <div> find my width </div>
</div>

Test the width:

$('#parent').css('visibility', 'hidden').show();
var w = $('#parent div').width();
$('#parent').css('visibility', 'visible').hide();
console.log('width: ', w);

Outputs:

> width:  496

Proof

Update:

With jQuery UI Tabs you can do something like this:

$('#tabs-3').css('visibility', 'hidden').removeClass('ui-tabs-hide');

Where '#tabs-3' is the hidden tab. See this fiddle for more information.

I'm sure theres' a better way, but as a quick fix:

$('.DataRow').show(); //show it
var w = $('.DataRow').width()  //get the width
$('.DataRow').hide(); //hide it

The code executes so quickly you'll never see it. (might wanna check it on slower/older browsers though) Like i said, this is a quick fix - i've had to do it myself and it works, but i'm sure there's a better way.