Getting a DIV's width when it's not set...

Hi! I'm trying to make a zoom-function for an swf-file where I want the swf to have a max-width but I don't want to set it's width...

What I'm trying to do is a dynamic page that loads different swf-files in a layer. Since I will have a LOT of swf-files I don't want to specify their width in the database, I just want them to load at a height of 500 and scale the width. This works fine and I've also made a working zoom-function that allows the user to change the size of the swf.

Now to the problem... The DIV holding the swf is inside a fixed-width table and I want to set a maximum zoom-in where the DIV-width = the table-width. The thing is I am unable to get the width of the swf or the DIV since I don't specify them.

The code is basicly:
<script type="text/javascript">
function zoom(zv)
{
if (zv=='-1')
{
ch = document.getElementById('gamediv').style.height;
nh = parseInt(ch)-30;
document.getElementById('gamediv').style.height=nh;
}
else if (zv=='0')
{
document.getElementById('gamediv').style.height="500px";
}
else
{
ch = document.getElementById('gamediv').style.height;
nh = parseInt(ch)+30;
document.getElementById('gamediv').style.height=nh;
}
}
</script>

...

<a style="cursor: pointer;" onclick="zoom('-1')"><img src="../../pics/minus.png"></a>
<a style="cursor: pointer;" onclick="zoom('0')"><img src="../../pics/reset.png"></a>
<a style="cursor: pointer;" onclick="zoom('1')"><img src="../../pics/plus.png"></a>

....

<div id="gamediv" align="center" style="height: 500px;">
<object etc. ... width="100%" height="100%">
<param name="movie" value="theswf.swf">
<param name="quality" value="high">
<embed src="theswf.swf" quality="high"... etc...></embed>
</object>
</div>

What happens when you zoom in is that once you reached the maxwidth of about 800 it only increases in height, pushing everything below further down without increasing the size of the swf. To prevent this I want to make an:

if (document.getElementById('gamediv').style.width<800)
{
// then zoom
}
else
{
// don't
}

This doesn't work since style.width returns "undefined" or null. I've also tried with offsetWidth which doesn't help since the DIV then claims to be 800 px wide, inherited from the parent table I suspect, and makes zooming in impossible...

If anyone can help or have any ideas on to fix the DIV-width to the width of the <object> rather than the table I'd be very thankfull.

 

Have you tried using clientWidth?

 

Doesn't work either unfortunately... Since the width is 100% it returns 800 aswell. Guess there's like an invisible frame around the swf-object that is 800 px wide...

But thanks for the tip anyway!