Question

Pretty simple task: using jquery I need to calculate the width of an input before the input is visible on the screen.

http://jsfiddle.net/ajbeaven/mKQx9/

Here is the code for convenience:

<div style="display:none;">
    <input />
</div> 

<script type="text/javascript">
    $(function () {
        alert($('input').width());
        $('div').show();
    });
</script>

Alert always shows 0

How do I calculate width without having to forcibly make the element visible, calculate the width, then hide them again?

Answer 1

You can’t. Hidden elements, by definition, have a width of 0.

If you need to calculate dimension, you might be able to get away with “showing” it offscreen (at some odd position, like left: -9999px; top: -9999px.

Also, this appears to be a duplicate of: jQuery – Get Width of Element when Not Visible (Display: None)