cómo obtener el ancho interior de un elemento en jquery SIN la barra de desplazamiento
Dado un div que tiene una barra de desplazamiento (por ejemplo, b / c de desbordamiento: automático), ¿cómo obtengo el ancho interior exacto del elemento? En mi ejemplo:http://jsfiddle.net/forgetcolor/2J7NJ/ El ancho y el ancho interno reportan el mismo ancho. El número que quiero debe ser inferior a 100.
HTML:
<div id='box1'>
<div id='box2'>
</div>
</div>
<p id="w"></p>
<p id="iw"></p>
CSS:
#box1 {
width:100px;
height:100px;
overflow:auto;
}
#box2 {
width:200px;
height:200px;
background-color:#aaa;
}
Javascript:
$('#w').text("width is: "+$('#box1').width());
$('#iw').text("inner width is: "+$('#box1').innerWidth());
Actualizar:
Necesito que esto funcione cuando el div box2 contiene una imagen grande (por lo tanto, tarda un segundo en cargarse). Aquí hay un ejemplo, que integra una de las soluciones a continuación (Lukx '), que no funciona:http://jsfiddle.net/forgetcolor/rZSCg/1/. ¿Alguna idea de cómo hacer que espere a que la imagen se cargue antes de calcular el ancho?