how to get innerWidth of an element in jquery WITHOUT scrollbar

Question

Given a div that has a scrollbar in it (e.g. b/c of overflow:auto), how do I get the accurate innerWidth of the element? In my example: http://jsfiddle.net/forgetcolor/2J7NJ/ width and innerWidth report the same width. The number I want should be less than 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());​

Update:

I need this to work when the box2 div contains a large image (thus, takes a second to load). Here's an example, integrating one of the solutions below (Lukx'), that doesn't work: http://jsfiddle.net/forgetcolor/rZSCg/1/. Any ideas how to get it to wait for the image to load before calculating the width?

Answer 1

By inserting a new DIV into the #box1-Container, this DIV will obtain the available width - and reading its width returns a value that appears to be correct.

HTML and CSS both remain unchanged

JS Becomes

var helperDiv = $('<div />');
$('#box1').append(helperDiv);

$('#iw').text("inner width is: " + helperDiv.width());
helperDiv.remove();​​​​​​​​​​​​​​​​​​​​​​​​​​​ // because we dont need it anymore, do we?

I also forked your Fiddle to see what I have done: http://jsfiddle.net/xc9xQ/2/

So to get this value with a function:

function widthWithoutScrollbar(selector) {
  var tempDiv = $("<div/>");
  $(selector).append(tempDiv);
  var elemwidth = tempDiv.width();
  tempDiv.remove();
  return elemwidth;
};

//Example
console.log($('#page').width());  // 1280
console.log(widthWithoutScrollbar('#page'));  // 1265

Answer 2

I'm not sure exactly what you're looking for but I believe it is either the scrollWidth or clientWidth of the div with id box1.

Both are JavaScript properties and do not need jQuery to retrieve but can be grabbed in jQuery with the following $('#box1')[0]. All this does is return the first (and if you're using an ID, only) DOM element from the jQuery selector.

If you're looking to find out the width of the content of box1 regardless of the scroll bar you're probably looking to find $('#box1')[0].scrollWidth. If you're looking for the width available and displayed within box1, you're looking for $('#box1')[0].clientWidth.

I forked your fiddle so you can see both in action. http://jsfiddle.net/arosen/xp9hD/

Answer 3

You can make another div by copying your original div, then get the width etc. Something like:

var saveDiv = $('<div />').html($('#box2').html());

saveDiv.innerWidth will give you 0