iFrame, i-Frame Resiver von David J. Bradshaw - Support | Kriesi.at

Tagged: iframe, iframe-resizer

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
August 30, 2024 at 1:00 pm #1465784
steridhh
Participant
Hallo,
I have integrated the iFrameResizer script by David J. Bradshaw on this page so that the content of the iFrame is automatically adjusted.

https://stadtrundfahrt-hansestadt-hamburg.de/tickets-buchen-raster-test/

Now I am not a JavaScript expert and I don’t know if you know the problem and can help me.
I’ll ask anyway.
What I don’t understand is: why doesn’t the resizer use the same space in width as the grid row above it?
Do you have any ideas? Do I have to integrate other js-scripts?
This is the code used for integration
```
<script type="text/javascript" src="/wp-content/files/js/iframeResizer.js"></script>
    <script type="text/javascript">
        function resizeId(){
            var iframe = document.querySelector('#palisis')
            iframe.style.width = iframe.parentElement.clientWidth + 'px';
        }
    </script>
    <iframe id="palisis" src="https://top-tour-hamburg.palisis.com/" style="width:100%; border:none"></iframe>
<script>
iFrameResize({checkOrigin:false, heightCalculationMethod: 'taggedElement'}, '#palisis');
</script>
```
In the original the display is much larger:

https://top-tour-hamburg.palisis.com/

On this example website from Palisis other /several js scripts are included.

https://gregor.palisis.com/?offer-direct=r-5290

Could this be the reason?

Thanks for supporting me.
Do you have a working example for me perhaps?
Stefan
- This topic was modified 2 months, 2 weeks ago by steridhh.
- This topic was modified 2 months, 2 weeks ago by steridhh.
- This topic was modified 2 months, 2 weeks ago by steridhh.
- This topic was modified 2 months, 2 weeks ago by steridhh.
- This topic was modified 2 months, 2 weeks ago by steridhh.
September 1, 2024 at 2:44 pm #1465992
Mike
Moderator
Hey steridhh,
Thanks for your patience and the link to your site, your site gives the error: iframeResizer.contentWindow.js:71 [iFrameSizer][palisis] No tagged elements (data-iframe-height) found on page
This could be that the script is running before the iframe is loaded, you could try changing to this:
```
<script type="text/javascript" src="/wp-content/files/js/iframeResizer.js"></script>
    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', function() {
        function resizeId(){
            var iframe = document.querySelector('#palisis')
            iframe.style.width = iframe.parentElement.clientWidth + 'px';
        }
    }
    </script>
    <iframe id="palisis" src="https://top-tour-hamburg.palisis.com/" style="width:100%; border:none"></iframe>
<script>
iFrameResize({checkOrigin:false, heightCalculationMethod: 'taggedElement'}, '#palisis');
</script>
```
But your script tries to make the ID #palisis fullwidth, which it is:

Your problem is that your iframe is showing a second iframe with another div with the class “shop-widget”, this element’s source css has a max-width of 1200px:

Perhaps this will work:
```
<script type="text/javascript" src="/wp-content/files/js/iframeResizer.js"></script>
    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', function() {
        function resizeId(){
            var iframe = document.querySelector('#palisis')
            iframe.style.width = iframe.parentElement.clientWidth + 'px';
            var iframeB = document.querySelector('.shop-widget')
            iframeB.style.width = iframeB.parentElement.clientWidth + 'px';
        }
    }
    </script>
    <iframe id="palisis" src="https://top-tour-hamburg.palisis.com/" style="width:100%; border:none"></iframe>
<script>
iFrameResize({checkOrigin:false, heightCalculationMethod: 'taggedElement'}, '#palisis');
</script>
```
If it did it would look like this:

I don’t think that is what you want, so I recommend making the element above the same width with this css:
```
#top.page-id-1162 #av-layout-grid-1.av-layout-grid-container {
	max-width: 1200px !important;
}
#top.page-id-1162 #av-layout-grid-1 .flex_cell {
	padding: 15px !important;
}
```
Best regards,
Mike
September 5, 2024 at 7:04 pm #1466335

steridhh
Participant

Hi Mike, sorry for the late reply.
I had an operation on my jaw – but don’t worry, everything is fine.
Thank you very much for your detailed explanation of the problem and your great support.
So fast, unbelievable.

I’ll leave the grid lines above as they are, otherwise the text will be too narrow. The responsive display is particularly important here and it is good.
But I have the impression that after using the script variant and by separating the frames, the content loads much faster.
You are probably right in your assessment (= no tagged element) – the content loads too late. It also loads slowly if you load it in a different context without integrating it.

I now leave it like this when using the script you adapted.
Many thanks for that.

Enfold is the best theme I know, but your super support goes one better.

Thanks a lot.

September 6, 2024 at 4:28 pm #1466397

Mike
Moderator

Hi,
Glad your operation went fine, and we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts