How to change height of multiple iframe inside div using jquery
I have multiple iframes inside a div. The content of each iframe is different, so the height changes for each iframe.
<div id="multipleIframe">
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
</div>
I am using a content carousel to switch between one iframe to another.
What initially happens is that the content carousel animates the automatic switching between each iframes. And then it lands on the first iframe. The user can then use the carousel navigation to switch between the iframe.
I am manipulating the height of an iframe like below:
$("#multipleIframe iframe").each(function() {
var heightIframe;
heightIframe = $("iframe").contents().height();
$("iframe").css({
"height": heightIframe
});
});
This only works for the first iframe, and the position of the remaining iframes is based on the first one already calculated. Hence, content truncation.
I want it to work during animation and when the user tries to switch between the iframe using navigation.
Does anyone have a solution to this problem?
source to share
It should work for you. The only time it might not work is when your code is executed even before all iframes have loaded. In this case, perhaps the code only finds the first iframe and sets its height. Or, set a timer for a function and execute it after a certain period of time. Below is a demonstration of this method:
http://jsfiddle.net/GCu2D/716/
Change it to:
setTimeout(function () {
$("#multipleIframe iframe").each(function () {
var heightIframe;
heightIframe = $(this).contents().height();
console.log(heightIframe);
$(this).css({
"height": heightIframe + "px"
});
})
}, 3000);
source to share