3

Nevermind this, i did it the oldschool way with counting elements.

I have a few div's inside a main div. Now the top div has a set width, but it's inside varies in width because of the content in it. So if i'm not mistaken, i need the innerWidth. Whatever the case, in this case it needs to result in a width of 600.

I'm not using jquery but jqui, so i would like it in javascript alone seeing jqui does not have an inner-/outerwidth function. This does mean though that I have a $ selector to play with.

<style> .holder { width:100%; /* which in this case is 320px */ overflow-x: auto; overflow-y:hidden; } .menu_item { width:200px; float:left; } </style> <div class="holder" onscroll="get_width(this)"> <div class="menu_item"> item1 </div> <div class="menu_item"> item2 </div> <div class="menu_item"> item3 </div> </div> get_width(that) { alert(that.innerWidth); // returns undefined alert(that.width); // returns undefined } 

http://jsfiddle.net/TSQs7/2/

1

2 Answers 2

6

I believe what you are looking for is element.offsetWidth

Sign up to request clarification or add additional context in comments.

2 Comments

returns 320, which is width of page. i need the inside width
thanks for this, it returns the exact width of an element
5

To get the width and height use clientWidth and clientHeight respectively.

element.clientWidth 

UPDATE:

clientWidth is supported even in old ie6

Check out this for all platforms support:

platforms support reference

Check out this great article for more in depth info on different width related properties:

understanding offsetwidth clientwidth scrollwidth and height respectively

NOTE:

This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

clientWidth MDN

Fiddle Demo

8 Comments

returns 320, which is width of page. i need the inside width
Wait a minute I will check and give you the fiddle link
it gives back a complete object. Which one do i need?
Wait a minute I will check and give you the fiddle link
I think i'm a bit assholedhere. I've updated your fiddle with the exact CSS i have and it doesn't work in jsfiddle (some kind of wrapping is going on for some reason). It does however work in phonegap ios and phonegap android (live and working on all phones) and working in all browsers. But your example still returns the screen width, and not the width of the inside, which is what i need.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.