8

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?

mix
  • 6,943
  • 15
  • 61
  • 90
  • innerWidth has nothing to do with scrollbars. And since the size (and visibility) of the scrollbar will differ depending on what browser and OS is being used, you'll get a different answer each time. You should probably look at alternate solutions to whatever your real problem is. – Blazemonger May 21 '12 at 21:06
  • See also : http://stackoverflow.com/q/8339377/1136253 – Bengi Besçeli Aug 02 '16 at 08:48

4 Answers4

16

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
Ryne Everett
  • 6,427
  • 3
  • 37
  • 49
Lukx
  • 1,283
  • 2
  • 11
  • 20
  • Although I would've set a bet against it, this even works in IE7 ;-) – Lukx May 21 '12 at 21:31
  • works unless the div contains a large image (presume because of load time). any idea how to make it work b/c of load time? IOW, how to get it to wait loading? forked example: http://jsfiddle.net/forgetcolor/rZSCg/1/ – mix May 21 '12 at 22:46
11

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/

Aaron
  • 13,349
  • 11
  • 66
  • 105
  • clientWidth requires no addtional html markup, works in IE 8, therefore in my opinion its better than accepted answer. +1 from me – Adam Moszczyński Oct 16 '13 at 06:24
  • No need to access the exact element. Simply read a property using a JQuery: $('#box1').prop('clientWidth') – Alexandr Apr 22 '16 at 13:38
1

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

Frenchi In LA
  • 3,139
  • 3
  • 25
  • 41
0

If a 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 again, this is not using jQuery, only javascript.

jnaO
  • 109
  • 1
  • 5
  • interesting approach. in my case i can't count on the scrollbar always being in the div, so need to get a dynamic value of its current state. but perhaps i could detect its presence and use this idea, though. – mix May 21 '12 at 22:52
  • You can wrap up the measuring in an if statement, that only calculate the width of the scrollbar if the inner box is larger than outer box, I've updated the fiddle (same address). – jnaO May 25 '12 at 09:58