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

Get help for TinyWebGallery, the best image gallery. The forum is also home for the Joomla JFUploader, TWG Flash Uploader and the Wordpress flash uploader.
It is currently 28. Mar 2024, 14:34

This forum is readonly now. Please use the new forum if you don't find the answer to your question here. The new forum is at https://www.tinywebgallery.com/blog/forum/


All times are UTC + 1 hour [ DST ]




Post new topic Reply to topic  [ 17 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: 17. Aug 2015, 12:24 
Offline

Joined: 17. Aug 2015, 12:22
Posts: 2
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


Top
 Profile  
 
PostPosted: 17. Aug 2015, 12:32 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
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


Top
 Profile  
 
PostPosted: 17. Aug 2015, 13:10 
Offline

Joined: 17. Aug 2015, 12:22
Posts: 2
Thanks. It works superbly. Worth every cent!


Top
 Profile  
 
PostPosted: 25. Aug 2015, 16:14 
Offline

Joined: 25. Aug 2015, 15:59
Posts: 6
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?


Top
 Profile  
 
PostPosted: 25. Aug 2015, 18:41 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
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


Top
 Profile  
 
PostPosted: 26. Aug 2015, 18:08 
Offline

Joined: 25. Aug 2015, 15:59
Posts: 6
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!


Top
 Profile  
 
PostPosted: 26. Aug 2015, 20:21 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
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


Top
 Profile  
 
PostPosted: 26. Aug 2015, 21:44 
Offline

Joined: 25. Aug 2015, 15:59
Posts: 6
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?


Top
 Profile  
 
PostPosted: 26. Aug 2015, 23:07 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
Because you have set
Iframe redirect url: http://new.carenational.com

Best, Michael


Top
 Profile  
 
PostPosted: 26. Aug 2015, 23:31 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
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


Top
 Profile  
 
PostPosted: 26. Aug 2015, 23:46 
Offline

Joined: 25. Aug 2015, 15:59
Posts: 6
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.


Top
 Profile  
 
PostPosted: 27. Aug 2015, 11:19 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
you you have an url where the iframe is?

Best, Michael


Top
 Profile  
 
PostPosted: 27. Aug 2015, 11:21 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
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


Top
 Profile  
 
PostPosted: 27. Aug 2015, 11:48 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
do you have the problem only on iphone or also on ipad?
ipad is better to debug ;).

Best, Michael


Top
 Profile  
 
PostPosted: 27. Aug 2015, 19:10 
Offline

Joined: 25. Aug 2015, 15:59
Posts: 6
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


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 17 posts ]  Go to page 1, 2  Next

All times are UTC + 1 hour [ DST ]


Who is online

Users browsing this forum: No registered users and 11 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
cron
powered by phpbb | Datenschutz/ Privacy policy