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

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.

-
this should probably be on Stack Overflow –  rm -rf Aug 9 '12 at 19:18
The simplest thing to do would be to delete this and ask on Stack Overflow (copy your question before you delete... you won't be able to access it afterwards) –  rm -rf Aug 9 '12 at 19:58
Why do you need "JavaScript to query the actually used dimensions"? The CDF can push the content around as it changes. –  Vitaliy Kaurov Aug 9 '12 at 20:53
@VitaliyKaurov How? As I embedded it, it has always the same height. cdf.embed('yoursourcecdf.cdf', width, height); is what I did, which results in constant width and height as specified in the second and third parameters. Are you saying you know of a method to make to height flexible automatically? That would mean you can answer my question [or rather, solve the problem because of which I'm asking]. Let's hear it. –  mathheadinclouds Aug 9 '12 at 21:07
Take a look at this bit.ly/MD6snh and rotate 3D graphics there with mouse. See how it re-sizes and content around follows CDF. Maybe going through the page source can help. –  Vitaliy Kaurov Aug 9 '12 at 21:57

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);
}
obj = document.embeds[0];
obj.addEventListener('RecommendedSizeChanged', changeDimensions, false, false);
}
}
</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

-
Very useful to know. –  Jens Aug 10 '12 at 1:17