How to modify following jQuery function to detect iframe height?

Question

I use facebook commenting plugin on my website. It is hidden in a div.

<div style="display: none" id=cmbx(id) class="comentBox">

  <div class="fb-comments" data-href="mywebsite.com(id)" data-num-posts="5" data-width="520"></div>  

</div> 

This is facebook comments javascrip part

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=143512332326919";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

There is a jquery function that shows hidden .comentBox div, it lunches once the following link is clicked

<a class="st_commentsa" href="#" onClick="return false" onMousedown="javascript:toggleSlideBox(\'cmbx(id)\');">Comments</a>

and here is a jQuery function

function toggleSlideBox(x) {
    if ($('#' + x).is(":hidden")) {
        $(".comentBox").slideUp(200);
        $('#' + x).slideDown(200)
    } else {
        $('#' + x).slideUp(200)
    }
}

---

The problem is as follows. Once a hidden div get's expanded there is a lot of space under facebook comments that is not suppose to be there, I guess this is caused, because jquery function doesn't know the height of facebook iframe. Could you please suggest any solutions / modifications that can fix this problem?

You can see the problem yourself here: http://inelmo.com/inelmo (click on several comments links under the posts to oppen hidden divs.)

NOTE: I tested it in several browsers, FireFox works normaly, the problems are present in chrome, safari and IE, not sure about opera.

Answer 1

This might be a bit hacky, but it should work. (Unable to test).

The problem seems to be that your iframe is deciding its height is around 400px more than it needs to be for some reason. This might be a facebook issue.

What you could do is manually set the height of the iframe to "auto" at pageload.

$(document).ready(function() {
   $(".fb-comments iframe").css("height", "auto");
});

I'm unable to test this, but have proof of concept editing DOM in chrome.

---Edited Code Below---

$(".fb-comments iframe").css("height", function() {
    $(this).contents().find("body").height();
});

Hopefully this will resolve the problem by setting the iframe height to the height of its contents. Again, not sure how it will turn out with the above. The auto property doesn't seem to expand the iframe to match its contents the way a normal html element would. Keep the code in the Comment Click event.

I think this might cause another problem where when the contents of the iframe change (as they're bound to when someone adds a comment) the iframe won't expand. So we're now getting to the stage where you have to constantly monitor the contents of the iframe and apply them to the iframe itself, which seems way too complicated, but I can't think of a simpler way.

I did a quick search to see if anyone had a cleverer method of expanding an iframe to match its contents and couldn't see one. But that seems to be what your real question is now that we've looked into it.