Question

I’m currently writing a new theme for my website and I am running into problems dynamically adjusting the heights of div elements in an iframe. The source in the iframe is on my domain, but I can’t edit it directly.

What I want to do, is have a script that will read the height of the iframe (for example 1000px), read the height of two divs within the iframe (example #content height=200px and #question height =600px). It then adjusts these two heights to fit the iframe page.

so I guess something that will look like this:

var height = $('iframe').height();
var content_height = $('iframe').contents().find('#content').height();
var question_height =  $('iframe').contents().find('#question').height();
var diff = height - content_height - question_height
if diff > 0
   "new content height" = content_height + diff/2
    "new question height" = content_question + diff/2
end

I am a complete noob when it comes to javascript, so any help would be great.

Answer 1

Something like this should work:

 $('iframe').height();
 $('iframe').contents().find('#content').height();
 $('iframe').contents().find('#question').height();