views:

160

answers:

1

I have two divs like so

<div id="parent" style="width:100px:overflow:hidden;">
    <div id="child"> 
      tooooooooooooooooooooo much content to fit in parent
    </div>
</div>

I'm dynamically updating the content of child and scrolling it using Jquery. I would like to be able to find how wide the child is so I know when to stop scrolling. The problem is that the child's actual width once the overflowed content is present, is wider than even the screen (seems to be about 2500 pixels with the current test content). The border of the element, if its set, does not extend to the actual width of the content, the text overflows beyond the visible border.

Using JQuerys $('#child').width , the clientWidth, scrollWidth (thanks bobince) and offsetWidth properties all max out at 1024px (which is the width of my monitor). Does any one know of any way to find out how wide the elements content is including the overflow? If it helps, The app I am building will run in a kiosk type environment, so a firefox only (even a nightly version) solution is fine.

Update: scrollWidth on the parent works, I should have read more carefully, thank you again bobince.

+3  A: 
document.getElementById('parent').scrollWidth

scrollWidth is an IE extension that historically was less well supported than offsetWidth. However nowadays all the modern desktop browsers include it.

bobince
I am afraid scrollWith is maxing out at 1024px as well. Thanks for the suggestion though.
Sean O Donnell
Works for me in FF3 — post a complete code sample that doesn't work? Check you're looking at the ‘parent’ scrollWidth, not the ‘child’, and that the content that's too wide doesn't naturally wrap at 1024 (or use ‘white-space: no-wrap’ to stop it). Finally check the syntax — in your example there's a colon instead of a semicolon between rules.
bobince
aha, the parent, missed that bit , it works! Thank you very much.
Sean O Donnell