Reputation: 225
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
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
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