CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapiframe
Niklas
Niklas

Reputation: 127

Resize container when iframe changes height

I'm trying to find a way to resize the embedding div when an iFrame contained therein changes height.

This is basically what I have:

<div>
    <iframe src="www.somesite.com"></iframe>
</div>

So the iFrame content will change height, and I would like the div that contains it to resize accordingly.

Any magic jQuery or Bootstrap (the page uses both) that I can use ?

Upvotes: 1

Views: 89

Answers (1)

imanshu15
imanshu15

Reputation: 764

Try this,

<div id="iframeContainer">
    <iframe src="www.somesite.com" id="contentIframe" onload="setContentHeight()"></iframe>
</div>

<script type="text/javascript">
  function setContentHeight() {
      var iframe = $('#contentIframe').contents();
      if(iframe) {
	    var height = iframe.height();
		$("#iframeContainer").height(height);
      }   
  }
</script>

Upvotes: 1

Related Questions