responsive iframe

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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
S.A
User avatar
crispy68
 
 
Posts: 2914
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: responsive iframe

Post by crispy68 »

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)
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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!
S.A
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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
S.A
User avatar
crispy68
 
 
Posts: 2914
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: responsive iframe

Post by crispy68 »

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.
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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

https://jbastosimoveis.com.br/imoveis/7341.php
S.A
User avatar
crispy68
 
 
Posts: 2914
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: responsive iframe

Post by crispy68 »

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.
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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
S.A
User avatar
crispy68
 
 
Posts: 2914
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: responsive iframe

Post by crispy68 »

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>.
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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?
S.A
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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
S.A
User avatar
crispy68
 
 
Posts: 2914
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: responsive iframe

Post by crispy68 »

Do you have a link to the page so we can see what is doing?
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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
S.A
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

:cry:
Last edited by alexoliveira on Tue Nov 05, 2024 8:57 am, edited 1 time in total.
S.A
User avatar
crispy68
 
 
Posts: 2914
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: responsive iframe

Post by crispy68 »

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.
User avatar
BaconFries
 
 
Posts: 5669
Joined: Thu Aug 16, 2007 7:32 pm

Re: responsive iframe

Post by BaconFries »

waiting for support :cry:
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...
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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.)
S.A
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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.
S.A
User avatar
crispy68
 
 
Posts: 2914
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: responsive iframe

Post by crispy68 »

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;.
User avatar
alexoliveira
 
 
Posts: 216
Joined: Fri Oct 01, 2021 5:12 am
Contact:

Re: responsive iframe

Post by alexoliveira »

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.
S.A
Post Reply