Can JavaScript query the actually used dimensions of an HTML embedded CDF?

Question

I have an HTML embedded CDF on my website. The size that is actually being used up by the single manipulate in the CDF changes when you use the CDF; you can make more sliders appear, and then it will take up more space.

I have jQuery embedded in the page, so you can easily snoop around in the HTML DOM tree.

If you view the page in Firefox, and you got the Firebug extension, you can type in Firebug $("embed").height() which will give you the result 400, which is the hardcoded value I gave for the height of the embedded CDF content. I can change that height later on, if I want to, for example $("embed").height(300) will make the cdf take up less space. However, there appears to be no way to find out from JavaScript how much space is currently being used up by the CDF (or by the single Manipulate within the CDF, to be precise).

I'm actually pretty sure that it's impossible, but I would love to be proven wrong. Any ideas?

update

if you know of a way to specify something like "height='100%'", meaning, "height = whatever is needed", that would be even better. "100%" for the height parameter in the JavaScript call to cdf.embed does not work, I tried that.

update

@Vitaliy: Thanks, I figured it out thanks to your comment, will post solution shortly.

Answer 1

load jQuery in the head, and also put this in the head

<script type="text/javascript" src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js"></script>
<script type="text/javascript">
    var cdf = new cdfplugin();
    var width = 910;
    var height = 500;
    function changeDimensions(){
        obj = document.embeds[0];
        w = obj.RecommendedWidth;
        h = obj.RecommendedHeight;
        $(obj).width(w);
            $(obj).height(h);
    }
    function addHandler(){
        obj = document.embeds[0];
        obj.addEventListener('RecommendedSizeChanged', changeDimensions, false, false);
    }
    function bodyonload(){
        setTimeout("addHandler()", 500);
    }
</script>

in the body, where you want to put the cdf, put this

<script type="text/javascript">
        cdf.embed('sinPlot.cdf', width, height, {autoresize: true});
</script>

the key thing here is the autoresize, otherwise .RecommendedWidth and .RecommandedHeight will just stay constant.

Here it is to look at on my site

UPDATE this solution does not work in Internet Explorer