Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum

I'm trying to include D3 visualizations in my wordpress using advanced iframe. I have bought the pro version, but the responsive frame feature does not seem to work. Am I doing something wrong? This is a demo page:

http://myfido.at/just-a-simple-post/

This is how I included the iframe in wordpress:



Cheers,

Seb

http://myfido.at/d3/auto_industry/ is not responsive (it has a fixed heigth of 600 and width of 1200).

What you can do is to use auto zoom:
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/auto-zoom-iframe-content
or even auto zoom with a fixed ratio.

Or make the other page responsive.

Best, Michael

Thanks. It works superbly. Worth every cent!

I'm having the same problem. I'm using

[advanced_iframe securitykey="b5d6226260266f90e0205e81fad781ad29a8c61b" src="http://careers.carenational.com/" width="100%" height="2350px" max-width="100%" enable_responsive_iframe="true" onload_resize="true"]

The page is responsive, and seems to work fine using Safari developer iphone, but does not resize on my iphone. I am using advanced iframe pro. I do have access to the source code, but I don't understand how or where to add the vars mentioned in the writeup. Help?

Have you checked the quick start guide?

Which setup do you have? Because your settings are for the same domain only.
For different domains you need to use the external workaround. There is an extra tab in the administration with a lot of documentation.

The vars can be added before you include the ai_external.js or by adding it to the administration because then the settings are saved to ai_external.js.

My examples on the demo add the vars before the script as only ai_external.js can exist:
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/responsive-iframes#e20

max-width="100%" is not valid setting. But this is don internally if you set enable_responsive_iframe="true"

If you need different settings for the iphone you can also use the internal browser detection.

Best, Michael

Darn - just typed for 20 minutes then was told I wasn't logged in. darn darn darn. Ok, here goes again.

Thanks for responding Michael, I sure hope you can help me. I changed the shortcode to:

[advanced_iframe securitykey="b5d6226260266f90e0205e81fad781ad29a8c61b" src="http://careers.carenational.com/" enable_responsive_iframe="true"]

and then after reading your comment about browser detection, changed that to the following:

[advanced_iframe securitykey="b5d6226260266f90e0205e81fad781ad29a8c61b" src="http://careers.carenational.com/" enable_responsive_iframe="true" browser="iphone,ipad,ipod"]
[advanced_iframe securitykey="b5d6226260266f90e0205e81fad781ad29a8c61b" src="http://careers.carenational.com/" enable_responsive_iframe="true" browser="default"]

I have added:
<script src="http://new.carenational.com/wp-content/plugins/advanced-iframe-custom/ai_external_config_carenational.js"></script>
<script src="http://new.carenational.com/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>

before </head> to the page I want to iframe.

I've created a custom_carenational.css file which is in the advanced-iframe-custom folder.

In the Advanced tab I've set the following to "yes":

Show loading icon
Enable responsive iframe
Resize iframe to content height
Resize iframe to content width
AJAX events are jQuery (looks like that was default)

In the External Workaround I have set the following to "yes":

write css directly
Iframe redirect url: http://new.carenational.com


I think it works on android phones, but does NOT work on my iphone. We are almost ready to go live, but this is a show stopper. Please help?

Thanks!

Hi,

I have checked http://careers.carenational.com/.
There is no ai_external.js in this page.

About the browser detection. In your case both shortcodes are the same so it does not change anything.

The settings which have the "Save icon" are saved to the ai_external.js.
- Resize iframe to content height
- Resize iframe to content width
- AJAX events are jQuery (looks like that was default)

Are for the same domain only!

On the "External Workaround" tab you only need to set the first 2 settings to yes. Than you don't need ai_external_config_carenational.js

Currently I think it does not work like you want on any device...

Best,
Michael

Ok, I found out how I am to add the javascript link. I have to change the layout to custom otherwise the files don't get updated. Interestingly, when I add it to the <head> and try to bring the page up without being iframed in, it redirects to new.carenational.com. Why would that be?

Because you have set
Iframe redirect url: http://new.carenational.com

Best, Michael

and you have not activated auto height what you need for the responsive iframe:

In the generated file is:
if (typeof updateIframeHeight === 'undefined') {
var updateIframeHeight = "false";
}
if (typeof keepOverflowHidden === 'undefined') {
var keepOverflowHidden = "false";
}

if you enable this in the administration true will be rendered there.
Make sure to refresh this file in the browser after the changes...

Best,
Michael

Ok, that was it. But now the iphone version is still not responsive, and has now lost the styling it shows on my desktop. But most importantly, it is not responsive on the iphone - odd, it's responsive on my desktop for Safari, Google Chrome, and Firefox.

What am I doing wrong?

I added the vars

<script>
var updateIframeHeight = "true";
var keepOverflowHidden = "false";
</script>

Still not responsive.

you you have an url where the iframe is?

Best, Michael

and why don't you enable the auto height in the administration?
Setting it by script before the other script is only if you need different configurations on different pages.

Best, Michael

do you have the problem only on iphone or also on ipad?
ipad is better to debug .

Best, Michael

Client said don't worry about it right now. They have been going to a separate page for years, just thought it would be sleeker to have the page part of their primary website. I will follow up later after we go live.

Hate to have spent the money and can't use it now - but I WILL circle back after we are launched.

Thanks!

Cindy