responsive iframe

alexoliveira · Post by **alexoliveira** » Sun Feb 11, 2024 9:22 pm

Could you send me the demo .wbs in zip to get a better idea?

page that will appear inside the iframe:
https://adm.jbastosimoveis.com.br/imove ... eview=true
You can check that within the code I added it correctly as stated.

where is the iframe located that I would like to work the way your demo is working
https://jbastosimoveis.com.br/imoveis/7341.php

I also uploaded the files as mentioned in your tutorial

crispy68 · Post by **crispy68** » Sun Feb 11, 2024 10:45 pm

There is not really a demo I can send you. Simply follow the steps I laid out.

Step 1, simply open up your WB project, go to the page with your iframe and add the code I gave you.

Step 2, this code has to be added to the html page within the iframe. You will need to add this manually. Most hosts have an editor that you can open up the page online and add the code.

Step 3, you will need to upload these files (found in the folder you download from Github for IframeResizer) and upload to your .js folders for each site (the iframe site and the property site).

I looked at your first links source file and I don't see where you added the code needed to call the .js file. Also, did you upload the .js file to the server? (step 2)

As for your 2nd link above, I see where you added the script but you are missing the '#' for the ID. You have 'iframe' and it should be '#iframe'. (step 1)

alexoliveira · Post by **alexoliveira** » Mon Feb 12, 2024 12:36 am

Thank you all for your team support, thank you very much.. It's an honor to always be part of this family.. Special thanks to Crispy68 for the special support and dedication to solving my problem, you guys are incredible!

alexoliveira · Post by **alexoliveira** » Sat Mar 02, 2024 4:08 pm

Guys, I'm trying to install it on this other website, and it's not working, can anyone give me feedback on what it could be?

website:
https://peixariablackfish.com.br/

iframe:
https://peixariablackfish.com.br/app/fish

crispy68 · Post by **crispy68** » Sat Mar 02, 2024 10:32 pm

At first glance, it looks as though you did not place the scripts in the correct spot.

1. On the webpage with the iframe, you need to make sure that the script is placed before the </body> tag. You have it in the <head> section. You may want to set in the options to move javascript to the end of the page.

2. On the page that shows up in the iframe, you have the script in the <head> section again. It needs place before the end </body> tag also.

These are both stated in my previous post.

alexoliveira · Post by **alexoliveira** » Sun Mar 03, 2024 7:48 am

Could you please consult again, I'm using the same way as in:

https://jbastosimoveis.com.br/imoveis/7341.php

crispy68 · Post by **crispy68** » Mon Mar 04, 2024 12:31 am

Your first site is not the same as the 2nd site you are having issues with. As stated in my last post, you have the scripts in the wrong place. Please make sure you added it the same way as you did the first site.

alexoliveira · Post by **alexoliveira** » Wed Mar 13, 2024 8:56 pm

I updated it and check that I added it in the correct locations, can you help me by letting me know where I can add it to make it work?

http://www.peixariablackfish.com.br

crispy68 · Post by **crispy68** » Wed Mar 13, 2024 9:34 pm

So the 2 issues I see are this:

1. on the page with the iframe, you have only have part of the code at the bottom of the page. It should look like this:

Code: Select all

<script type="text/javascript" src="js/iframeResizer.min.js"></script>
<script>iFrameResize({}, '#InlineFrame1')</script>

You have:

Code: Select all

<script type="text/javascript" src="js/iframeResizer.min.js"></script>

The rest of the code is placed in a external .js file (index.js) which should work but the call to this file is in the <head> section. Go to Tools--> HTML and in the javascript section click "Move JavaScripts to the end of the page" which should move the .js code to the end of the page.

2. On the page that is to appear in the iFrame, it looks like the <script> is inside a layout grid and not at the end of the page before the </body> tag. Remove the html box from the grid and make sure it is set to Type=Before </body>.

alexoliveira · Post by **alexoliveira** » Thu Oct 31, 2024 10:13 am

Hello team, everything is working correctly except when I open very large content in the iframe, when I go back to smaller content it does not adjust itself, how do I get the iframe to be and adjusted to the content without having too much white space?

alexoliveira · Post by **alexoliveira** » Fri Nov 01, 2024 2:52 am

I don't know if you understood me correctly, but what happens is that when you open a page within a very long iframe and when you click on some part that reduces the length of that content, there is a huge blank space at the bottom, what should I do Or is there other code to add and make the iframe smaller to adapt the smaller content?

I'm using the extension: iFrame Resizer

crispy68 · Post by **crispy68** » Fri Nov 01, 2024 11:47 am

Do you have a link to the page so we can see what is doing?

alexoliveira · Post by **alexoliveira** » Sat Nov 02, 2024 7:20 am

When accessing this link, see that when you click on View cart there is a huge space because the iframe does not shrink to adapt to the content.

CHECK THE PICTURE
https://ibb.co/PxpLh24

As you can see, if you change from one page to another, the iframe resizer extends to open the entire content, but when changing to another iframe it does not reduce the content to a smaller size.
https://ibb.co/FBWWBDp

LINK:
https://startagencia.net.br/registrar-se.php

alexoliveira · Post by **alexoliveira** » Sun Nov 03, 2024 8:51 pm

crispy68 · Post by **crispy68** » Sun Nov 03, 2024 9:19 pm

The issue regarding the large space is that this page (https://central.startagencia.net.br/cart.php?a=checkout) viewed in the iframe, the <body> of that page is set to 100vh. This is why it is trying to fill the entire browser page. It's not that the iframe is incorrect but the page being viewed is dictating the height.

BaconFries · Post by **BaconFries** » Sun Nov 03, 2024 9:46 pm

waiting for support

Your waiting for support, I personally think this is rude of you since it hasn't even been one full day yet Sat to Sun for a reply!!
You seem to think that you should get a answer as quickly as your post a question!! crispy68 (Ron) has done a great job answering you and you really should be more grateful and show your appreciation to him and others who try to help and just wait patiently for it...

alexoliveira · Post by **alexoliveira** » Mon Nov 04, 2024 2:41 am

I appreciate every time I asked for support, I never wanted to be rude to anyone I'm just committed In a project, I'm sorry if I made a mistake. But this is an extension that I'm using.

(I use Google Translate, maybe my English sounds arrogant or something like that and it wasn't my intention.)

alexoliveira · Post by **alexoliveira** » Tue Nov 05, 2024 10:27 am

crispy68 wrote: ↑Sun Nov 03, 2024 9:19 pm The issue regarding the large space is that this page (https://central.startagencia.net.br/cart.php?a=checkout) viewed in the iframe, the <body> of that page is set to 100vh. This is why it is trying to fill the entire browser page. It's not that the iframe is incorrect but the page being viewed is dictating the height.

DEMO:
https://startagencia.net/demo.zip

thanks for the feedback. sending a demo to see how I'm setting it up. Tell me if the problem is not within the demo or in the settings, where did you find 100vh?

Thank you in advance, you are incredible.

crispy68 · Post by **crispy68** » Tue Nov 05, 2024 2:03 pm

I'm not at my computer to look at your file but the issue as I see it is not with the iframe. It is working correctly.

Keep in mind that the page inside the iframe will dictate what you see. So in your case, the page being displayed in the iframe (the page link I referenced) has the minimum height set 100vh. If this is being generated by your cart script, then you are going to need to open up the CSS file and change or add the CSS you need to change the behavior. Changing the code to min-height:auto; seems to work but that will have to be done on the page itself (not in WB).

If you want to see what i'm seeing then simply click on the link I mentioned to open the page, right click on the empty space, choose 'inspect' and you will see on the right that the <body> is highlighted and in the CSS code that <body> is set to min-height:100vh;.

alexoliveira · Post by **alexoliveira** » Tue Nov 05, 2024 3:10 pm

Thank you very much for your wonderful support, now that I know how to work with the extension I will close this topic.

Your support is very essential, crispy, congratulations on the incredible wisdom.

www.wysiwygwebbuilder.com

responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe

Re: responsive iframe