Mathematica Stack Exchange is a question and answer site for users of Mathematica. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

enter image description here

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?


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.


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

share|improve this question
this should probably be on Stack Overflow – R. M. 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) – R. M. 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 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
up vote 8 down vote accepted

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

<script type="text/javascript" src=""></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;
    function addHandler(){
        obj = document.embeds[0];
        obj.addEventListener('RecommendedSizeChanged', changeDimensions, false, false);
    function bodyonload(){
        setTimeout("addHandler()", 500);

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

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

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

share|improve this answer
Very useful to know. – Jens Aug 10 '12 at 1:17

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.