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

External Workaround fails on Desktop, works on iPad/iPhone
https://www.tinywebgallery.com/forum/viewtopic.php?f=21&t=4349
Page 1 of 1

Author:  teracomp [ 9. Jun 2017, 20:44 ]
Post subject:  External Workaround fails on Desktop, works on iPad/iPhone

I've been working on this for the last two days with no good results.

Here's my shortcode (set to let the user see the iframe; by default, height gets set to 91px..unusable)
[advanced_iframe securitykey="mykey" id="dm5" width="100%" height="890" scrolling="yes" enable_external_height_workaround="true" src="http://plantertools.com/dm5/app"]

In my target index.html file I have placed the following:
<script>
var iframe_id = "dm5",
updateIframeHeight = "true",
hide_page_until_loaded_external = "true",
iframe_content_id = "#becomingfive-assessment";
</script>
<script src="http://church-multiplication.com/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>

Based on reading the forum, I tried your shortcode recommendation:
[advanced_iframe securitykey="mykey" use_shortcode_attributes_only="true" src="http://plantertools.com/dm5/app" id="dm5" height="300" width="800" scrolling="no"]
But this does not work.

In fact, when I include the ai_external.js, it's consistently broken. I have it commented out at the moment so I can at least use the page.

Here's the really odd thing: it works perfectly as configured, i.e., WITH ai_external.js file and my shortcode above, on iPad and iPhone. The iframe expands nicely!

But when using the ai_external.js in my source file, the desktop version's iframe height is set to 91px.

Initial Wordpress page: http://church-multiplication.com/disciplemaker/

Greatly appreciate your support!

Author:  TinyWebGallery [ 10. Jun 2017, 22:31 ]
Post subject:  Re: External Workaround fails on Desktop, works on iPad/iPho

iframe_content_id = "#becomingfive-assessment";

alone does not make sense to me.

but you have set #becomingfive-assessment in the administration as element to measure in the ai_external.js
I see the settings in ai_external.js so you don't need anything before ai_external.js if you use the administration.

And also can you check your javascript console for errors?

Can you create a page for me where I can see the error?
Have you checked
4. Done. Click here if it does not work.
?

Best, Michael

Author:  teracomp [ 11. Jun 2017, 11:12 ]
Post subject:  Re: External Workaround fails on Desktop, works on iPad/iPho

I removed the additional variable declaration.

Yes, I did check #4, and again just now. ai_external is showing up in the network panel.

There are no errors in the console.

You can view this at http://church-multiplication.com/disciplemaker/

Very weird that is works on smaller devices, seems like the resize event is being captured on desktop.

Author:  TinyWebGallery [ 11. Jun 2017, 15:15 ]
Post subject:  Re: External Workaround fails on Desktop, works on iPad/iPho

at http://plantertools.com/dm5/app/#/reglogin ther is still the script not enabled....
So nothing I can check...

Best, Michael

Author:  teracomp [ 11. Jun 2017, 22:37 ]
Post subject:  Re: External Workaround fails on Desktop, works on iPad/iPho

I've setup a test page for you.

http://church-multiplication.com/ai-test-page/

What you will see is a very small iframe that is rather impossible to use.

Please let me know if this works for you and if you have ideas for fixing it.

Author:  TinyWebGallery [ 11. Jun 2017, 23:08 ]
Post subject:  Re: External Workaround fails on Desktop, works on iPad/iPho

I see a iframe width a fixed height because of

iframe#dm5 {
height: 884px !important;
}

in your style sheet!

Also it is a angular js website. A single page application where no onload event is fired for the other pages...

you need to configure "resize on element resize!"

See
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/resize-on-element-resize

var resize_on_element_resize = "#becomingfive-assessment";
var resize_on_element_resize_delay = "100";

Best, Michael

Author:  teracomp [ 11. Jun 2017, 23:32 ]
Post subject:  Re: External Workaround fails on Desktop, works on iPad/iPho

Fantastic!

The answer:
var resize_on_element_resize = "#becomingfive-assessment";
var resize_on_element_resize_delay = "100";

Thanks VERY much!

Page 1 of 1 All times are UTC + 1 hour [ DST ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/