...

View Full Version : Getting the actual width of a DIV postioned inside another in Firefox



WA
01-07-2005, 02:53 AM
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:


<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.

jkd
01-07-2005, 03:17 AM
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;

WA
01-07-2005, 07:23 AM
Hi Jason:
Nope, I still get 300px in both cases. Guess it's time to fallback to my other less elegant strategy. :)

rmedek
01-07-2005, 07:49 AM
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...

WA
01-07-2005, 08:07 AM
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).

rmedek
01-07-2005, 08:27 AM
yes, but you can use "position: relative" as well to control the position of the slave div within the master div... for example:


<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>

WA
01-07-2005, 08:37 AM
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.

liorean
01-07-2005, 05:20 PM
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.

WA
01-08-2005, 01:10 AM
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.

Kor
01-11-2005, 02:00 PM
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...

jbot
01-11-2005, 06:15 PM
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.

matthe
01-25-2005, 04:00 PM
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

WA
01-25-2005, 11:18 PM
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?

gsnedders
01-25-2005, 11:29 PM
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...

matthe
01-26-2005, 10:20 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum