CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
WhoCares
WhoCares

Reputation: 225

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>

Upvotes: 1

Views: 526

Answers (2)

Maniarasu V
Maniarasu V

Reputation: 209

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>

Upvotes: 2

scottdurban
scottdurban

Reputation: 518

From your javascript above I'm guessing the url is dynamic, therefore I'd suggest the following is executed on window load. I suck at straight Java, so you'd need to load jquery for my solution to work.

jQuery(window).load(function() {
 var url = document.getElementById("iframe_id").src;

 if(url = 'http://www.yourdomain.com') {
  jQuery('div.youWishToFloat').css({'float':'right'});
 } elseif(url = 'http://www.yourdomain2.com') {
  jQuery('div.youWishToFloat').css({'float':'left'});
 }
}

You'll need to assign an ID to your iframe for this to work.

Upvotes: 1

Related Questions