Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum
https://www.tinywebgallery.com/forum/

Advanced Iframe Pro: responsive iframe does not work
https://www.tinywebgallery.com/forum/viewtopic.php?f=21&t=3924		 Page 1 of 2
Author:  sebarn [ 17. Aug 2015, 12:24 ]
Post subject:  Advanced Iframe Pro: responsive iframe does not work
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:

Code:
[advanced_iframe securitykey="8fdcd34f8f293016bfa1c30fbfebbd53794713bb" use_shortcode_attributes_only="true" src="http://myfido.at/d3/auto_industry/" width="100%" content_styles="width:900" "height:900" onload_resize="true" enable_responsive_iframe="true" scrolling="no" ]


Cheers,

Seb
Author:  TinyWebGallery [ 17. Aug 2015, 12:32 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
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
Author:  sebarn [ 17. Aug 2015, 13:10 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
Thanks. It works superbly. Worth every cent!
Author:  chill986 [ 25. Aug 2015, 16:14 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
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?
Author:  TinyWebGallery [ 25. Aug 2015, 18:41 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
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
Author:  chill986 [ 26. Aug 2015, 18:08 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
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!
Author:  TinyWebGallery [ 26. Aug 2015, 20:21 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
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
Author:  chill986 [ 26. Aug 2015, 21:44 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
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?
Author:  TinyWebGallery [ 26. Aug 2015, 23:07 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
Because you have set
Iframe redirect url: http://new.carenational.com

Best, Michael
Author:  TinyWebGallery [ 26. Aug 2015, 23:31 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
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
Author:  chill986 [ 26. Aug 2015, 23:46 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
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.
Author:  TinyWebGallery [ 27. Aug 2015, 11:19 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
you you have an url where the iframe is?

Best, Michael
Author:  TinyWebGallery [ 27. Aug 2015, 11:21 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
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
Author:  TinyWebGallery [ 27. Aug 2015, 11:48 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
do you have the problem only on iphone or also on ipad?
ipad is better to debug ;).

Best, Michael
Author:  chill986 [ 27. Aug 2015, 19:10 ]
Post subject:  Re: Advanced Iframe Pro: responsive iframe does not work
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
Page 1 of 2 All times are UTC + 1 hour [ DST ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/