Automatic height adjustment for iframe

Create issue
Issue #49 new
Dmitry Kopytine created an issue


There is an idea: automatically change the height of the lightbox - so that it could become equal to he height of the content in iframe.

I made this enhancement for my site. Probably in general case it should be done in a little more general way.

Fix 1.

{{{ #!javascript // iframe $iframe = $('<iframe src="'+ $elt.attr("href") +'" id="superbox-iframe" name="superbox-iframe" frameborder="0" scrolling="auto" hspace="0" width="'+ (curSettings.boxWidth - 20) +'" height="'+ curSettings.boxHeight +'"></iframe>');

// On iframe load $iframe.load(function(){

// Specified dimensions
$superbox.width( curSettings.boxWidth+"px" );
var height = Number(frames['superbox-iframe'].$('div#main').height());
if ($ {
    height += 18; // scrolling fix
$innerbox.height( height + "px" );
$(this).height( height + "px" );

// Id and Classes
setBoxAttrs({boxClasses: "iframe " + curSettings.boxClasses, boxId: curSettings.boxId});

// Show box



Fix 2.

{{{ #!javascript

// Position absolute if image height > window height // Original behaviour //if ($(window).height() < $wrapper.height()) { // $wrapper.css({position: "absolute", top: ($wrapper.offset().top + 10) + "px"}); //} // My site fix if (($(window).height() - 40) < $innerbox.height()) { $innerbox.height(($(window).height() - 40) + "px"); $('iframe', $innerbox).height(($(window).height() - 40) + "px"); }


Note these issues:

  1. In my code: $ = /chrome/.test(navigator.userAgent.toLowerCase());

  2. It works good with long content - but the Fix 2 is required if we want to see scrolling in the lightbox.

  3. I changed id and name of the iframe (see the code).

  4. This hack for Google Chrome is required because of the scrolling bug in this browser. I didn't check this in Safari - probably, this will require the same fix.

  5. (The most important thing). Look at this code: frames['superbox-iframe'].$('div#main').height()

It is required that jQuery exists in the iframe page. Probably is not really necessary - in fact I don't know how jQuery works with iframes.

(Also div#main should exist. But this is less important - I think, this will work even with 'body'. Sorry, I had no time to check it.)

  1. When div#main had a margin-bottom > 0, height() worked incorrect for me (height() does not include margins). So, scrolling was shown. Be careful with it - even if you replace 'div#main' to 'body'. Probably, it will be a good idea to add body's marginBottom and marginTop to the $('body').height().

Comments (3)

  1. Dmitry Kopytine reporter

    I may send a link to the resulting page with the changed script. But the link will be private (new markup has not been released yet). My email:

  2. Log in to comment