Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts

    Getting the actual width of a DIV postioned inside another in Firefox

    Hi:
    I'm having a hard time getting the true width of an absolutely positioned DIV when it's wrapped inside a relatively positioned one in Firefox:

    Code:
    <div id="master" style="position:relative;width:150px;height:35px;overflow:hidden;border: 1px solid black">
    <div id="slave" style="position:absolute;left:0;top:0;"><nobr>some text some text some text some text some text</nobr></div>
    </div>
    
    <script>
    window.onload=function(){
    alert(document.getElementById("slave").offsetWidth)
    }
    </script>
    In IE, the above script correctly returns the width of "slave", 306px, though in Firefox, it always returns the width of the master, which is 150px. Tried many things, but just doesn't work. Anyone know why or how to get around this? The only thing I can think of is to populate another hidden DIV with the same contents as "slave", and get the width in Firefox that way.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    First, try querying the generated width value:

    document.defaultview.getComputedStyle(slave, "").width;

    If not, you could try querying the box object it generates:

    document.getBoxObjectFor(slave).width;

  • #3
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Hi Jason:
    Nope, I still get 300px in both cases. Guess it's time to fallback to my other less elegant strategy.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Is there a reason to position the "slave" div absolutely? I get the proper width if I simply take out the "slave" div's absolute positioning...

  • #5
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Quote Originally Posted by rmedek
    Is there a reason to position the "slave" div absolutely? I get the proper width if I simply take out the "slave" div's absolute positioning...
    In my case yes, since I'm animating the slave DIV using scripting (scrolling it right to left).
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    yes, but you can use "position: relative" as well to control the position of the slave div within the master div... for example:

    Code:
    <div id="master" style="position:relative;width:150px;height:35px;overflow:hidden;border: 1px solid black">
    <div id="slave" style="position:relative;left:-20px;top:0;"><nobr>some text some text some text some text some text</nobr></div>
    </div>

  • #7
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Hmmm I never thought about that. You're right, I could use relative. In this case though, it's actually easier to stick with absolute though, since the script is already written to accomodate an absolutely pos slave DIV. I just find it odd how Firefox stores the width of such a DIV when it's encased in a relatively positioned DIV.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    George: The question here is: Do you want to meassure the element or it's content. Content may spill over a box. Boxes typically never size above their container unless either explicitly asked (or otherwise unable to fit into the parent, because of sizing limits of the implementation), with the exception of when the container has overflow set to auto or scroll. Content on the other hand spills over when needed unless a value other than visible is set on the container.


    As for iew, it's buggy. It expands the container instead of spilling over, which is dead wrong.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #9
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Very interesting liorean, I've never really tried to decipher it from a technical standpoint. But you're right of course. So I assume offsetWidth theoretically should return the width of a box, not its content? I always thought it was the other way around, or the true width of a box in real time (which would mean its content).

    So with the two DIVs set up like the one I have, what's the best way to get the actual width of the content of "slave"? Right now as mentioned I'm just creating a temporary free roaming hidden DIV with the same contents as "slave", and probing the width of that DIV in Firefox.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    on the other hand... if you size the div with a value smaller that the content's size, offsetWidth/offsetHeight in IE will return the content's size, while in Moz will return the given div's size (same as .style.width) .

    Thus, if you have more childs nested in a div you should probably look for the biggest value (if they are wraped) or the sum of their sizes...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by liorean
    As for iew, it expands the container instead of spilling over, which is dead wrong.
    I actually prefer that. for me an expanding element is not unsightly unlike one which allows its elements to spill over. for me, this defo one area where breaking the rules makes sense.
    *keep it simple (TM)

  • #12
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fixed!

    I had the exact same problem:
    nested DIV, absolute position, variable width and horizontally scrollable
    I finally was able to make it work by using the scrollWidth instead of width or offsetWidth

  • #13
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Quote Originally Posted by matthe
    I had the exact same problem:
    nested DIV, absolute position, variable width and horizontally scrollable
    I finally was able to make it work by using the scrollWidth instead of width or offsetWidth
    Interesting- I'll definitely give it a try. scrollWidth doesnt' seem to be part of W3C's DOM. Anyone know the origins of this property and how wide spread browser support is for it, especially in Mac?
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #14
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by WA
    Interesting- I'll definitely give it a try. scrollWidth doesnt' seem to be part of W3C's DOM. Anyone know the origins of this property and how wide spread browser support is for it, especially in Mac?
    If you give me some code I could test it for you...

  • #15
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    testfiles

    I've posted the stuff I put together here:
    http://193.109.190.219/scrollhorizontal.zip

    there's a lot of junk in there as I didn't have the time to clean it all up
    but it'll propably make more sense to you
    I'm on Mac - seems to work on most browsers I've tried it so far (safari, firefox, explorer, mozilla, netscape and camino)
    older versions of netscape and camino didn't work though but then again
    they were mostly not finnished yet.

    I don't know squat about dom's but I actually found the solution through firefox' dom inspector.
    Last edited by matthe; 01-28-2005 at 12:40 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •