How to get innerWidth of an element in jquery WITHOUT scroll bar

Question

Given a div that has a scrollbar (e.g. b / c overflow: auto), how do I get the exact inner width of an 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, it takes a second to load). Here is an example integrating one of the solutions below (Lukx '), which does not work: http://jsfiddle.net/forgetcolor/rZSCg/1/ . Any ideas how to make it wait for the image to load before calculating the width?

Answer 1

By inserting a new DIV in #box1 -Container, this DIV will get the available width - and reading its width will return a value that seems correct.

HTML and CSS 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 searched my script to see what I did: http://jsfiddle.net/xc9xQ/2/

So, to get this value using the 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 are looking for, but I believe that it is either scrollWidth or clientWidth div with id box1.

Both are JavaScript properties and do not need jQuery to be retrieved, but can be caught in jQuery with the following $('#box1')[0] . All this returns the first element (and if you use only ID) only the DOM from the jQuery selector.

If you want to know the width of the contents of box1, regardless of the scrollbar, you will probably find $('#box1')[0].scrollWidth . If you are looking for the width available and displayed in field1, you are looking for $('#box1')[0].clientWidth .

I played your violin so you can see how 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

Answer 4

If the solution in plain javascript is ok, you can use the technique described by David Walsh here: http://davidwalsh.name/detect-scrollbar-width

I forked your fiddle and implemented it: http://jsfiddle.net/jnaO/z9btp/

But then again, this is not using jQuery, but only javascript.