Dynamic and Responsive iFrame for WXSIM-EWN

Let's Chat
, ,
1

Thanks to Wim I have the WXSIM-EWN scripts running great, and have now added forecast.php to my main weather website in a dynamic responsive iFrame. See here:

https://www.360shetland.co.uk/weather/forecast.php

As you can see the height of the iFrame changes dynamically as you click or tap on the tabs, always showing the full height of the child page. This is done with some Javascript and a very simple style tag. Assuming your WXSIM-EWN scripts are in the default location (wxsim-ewn) you can use the following code directly, otherwise change the path to suit.

In the < head > section of your parent page insert the style code:

<style>
    .gh-fullwidth {
    width: 100%;
    }
</style>

Just before the closing < /body > tag insert the following script:

<!-- Dynamic responsive iFrame code, resizes iframe height on demand -->
<script>
function fit() {
    var iframes = document.querySelectorAll("iframe.gh-fit")

    for(var id = 0; id < iframes.length; id++) {
        var win = iframes[id].contentWindow
        var doc = win.document
        var html = doc.documentElement
        var body = doc.body
        var ifrm = iframes[id] // or win.frameElement

        if(body) {
            body.style.overflowX = "scroll" // scrollbar-jitter fix
            body.style.overflowY = "hidden"
        }
        if(html) {
            html.style.overflowX = "scroll" // scrollbar-jitter fix
            html.style.overflowY = "hidden"
            var style = win.getComputedStyle(html)
            ifrm.width = parseInt(style.getPropertyValue("width")) // round value
            ifrm.height = parseInt(style.getPropertyValue("height"))
        }
    }

    requestAnimationFrame(fit)
}

addEventListener("load", requestAnimationFrame.bind(this, fit))
</script>

Now add the following iFrame code where you want your child page to display:

<iframe src="wxsim-ewn/forecast.php" <!-- change path if required -->
    class="gh-fit gh-fullwidth"
    frameborder="0" >
</iframe>

And that’s it, your iFrame will respond dynamically to changes in the height of forecast.php, and the parent and child page will both be fully responsive, even looks good on an iPhone!

Make sure you have $mainwidth = “100%”; set in config.php to ensure the child page is responsive.

Hope this helps,

Rory

2 Likes