e gazi e gazi - 3 months ago 14
HTML Question

change the height of <div> according to <iframe> inside

Can anyone tell me how can I change the height of a

div
according to
iframe
which is inside the
div
.

Here is what I have done so far:



function url2div(url, target) {
document.getElementById(target).innerHTML =
'<iframe style="
width:100%;
height:100%;"
frameborder="0"
src="' + url + '" />';
}

.table1 { width: 100%;
display:table;
text-align:center;
border-width:1px;
border-color:black;
border-style:solid;
}

<div class="table1">
<div class="row">
<div class="tdnav">
<a href="#" id="list.php" onclick="url2div(this.id, 'content')">My lists</a>
<a href="#">Dummy</a>
</div>
<div class="tdic" id="content">
</div>
</div>
</div>




Answer

Change your url2div function like below. In this Code Snippet example below the iframe not loading, because it loading iframe inside iframe. But in your actual browser it will work. The highlighted RED was div and the BLUE border was your iframe (it not loading content here, it will work on your browser)

UPDATE : You can change the height of parent div after the iFrame was loaded.

1) Add a onload event to your iFrame (onload='onMyFrameLoad()')

2) On onMyFrameLoad function get the first div of your list.php page

3) Get the height of first div and assign it to the .table1 div

function url2div(url, target) {
  document.getElementById(target).innerHTML =
    "<iframe style='width:100%;height:100%;border-color: blue;' onload='onMyFrameLoad()' src='" + url + "' />";
}

function onMyFrameLoad() {
  // Get height of first div and assign it to the table1 div
  var parentDivHeight = document.getElementById('firstDivId').offsetHeight;
  document.getElementsByClassName('table1')[0].style.height = parentDivHeight + "px";
}
.table1 {
  width: 100%;
  display: table;
  text-align: center;
  border-width: 2px;
  border-color: red;
  border-style: solid;
}
<div class="table1">
  <div class="row">
    <div class="tdnav">
      <a href="#" id="http://www.google.com/" onclick="url2div(this.id, 'content')">My lists</a>
      <a href="#">Dummy</a>
    </div>
    <div class="tdic" id="content">
    </div>
  </div>
</div>