0

I try to adjust automatically iframes' height acording to the contents inside Avada (WP Theme) tabs.

I found here, in stackoverflow, this code:

Before closing </body> tag:

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 150 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}

In each tab:

<iframe id="ifrm" src="https://TheTabUrl.com"></iframe>

It works for me but only in the first tab. I've 4 iframes in 4 different tabs in the same page. Please, any idea about the way to make it work?

Thanx for your time in advance. Greetings

Jordi Juanola
  • 1
  • 1
  • Hey. How do you render iframes. Could you add that into you question body? – Max Nov 06 '21 at 02:16
  • Hi Max. First of all, thanx for the answer. Sorry, but I don't understand your question. The contents of the iframe are pages of the same website. It's because inside the Avada' tabs you only can insert html content and it's hard to modify for my customer. Using an iframe with the content of a page builded with Fusion builder allows my customer modify the content more easily. This content may change its height so we need to adjust each iframe's height. Hope it's more clear to understand. Thank you very much for your time. – Jordi Juanola Nov 06 '21 at 22:59

0 Answers0