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

Hello,

I am embedding a page from another domain using advanced iframe pro. On an android phone with chrome I can horizontally scroll the embedded content. However, on an iPhone and on the native android browser, I cannot scroll horizontally. I've included the short codes I used for this. It also appears that the iPhone is ignoring the show_part_of_iframe_x and _y coordinates, or they require radically different settings than the android. Despite not horizontally scrolling, the native android browser does obey the _x and _y coordinates.

What am I doing wrong?

Thanks,

Stu

[advanced_iframe securitykey="fa125e1276ec88c24847311636ece0f044a93aab" use_shortcode_attributes_only="true" src="http://islandslowp.bbstats.pointstreak.com/standings.html?leagueid=951" id="advanced_iframe" height="600" width="100%" scrolling="auto" show_part_of_iframe="true" show_part_of_iframe_x="20" show_part_of_iframe_y="250" show_part_of_iframe_height="600" show_part_of_iframe_width="375" show_part_of_iframe_zoom="true" enable_responsive_iframe=true" browser="iphone"]

[advanced_iframe securitykey="fa125e1276ec88c24847311636ece0f044a93aab" use_shortcode_attributes_only="true" src="http://islandslowp.bbstats.pointstreak.com/standings.html?leagueid=951" id="advanced_iframe" height="600" width="100%" show_part_of_iframe="true" show_part_of_iframe_x="22" show_part_of_iframe_y="250" show_part_of_iframe_height="600" show_part_of_iframe_width="375" show_part_of_iframe_zoom="true" enable_responsive_iframe="true" browser="android"]

iphone and ipad do not support scrolling in iframes out of the box! This is known problem of some ios versions (this was working in older versions).

But I have implemented a workaround for this!
Check
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/scrolling-on-ipad-and-iphone

and for you setup:
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe#e5

enable_ios_mobile_scolling="true"

enables this.

I have tried your suggestion, but it is still not working. Here is the shortcode with the addition you suggested. Is it possible that the width="100%" is causing a problem? Here is a link to the page so you can see it for yourself. It is fine on chrome browsers, both on the desktop and on an android. The native android browser also does not scroll horizontally.

http://islandusssa.com/slowpitch/island-pointstreak-standings/

[advanced_iframe securitykey="fa125e1276ec88c24847311636ece0f044a93aab" use_shortcode_attributes_only="true" src="http://islandslowp.bbstats.pointstreak.com/standings.html?leagueid=951" id="advanced_iframe" height="600" width="100%" scrolling="auto" show_part_of_iframe="true" show_part_of_iframe_x="20" show_part_of_iframe_y="400" show_part_of_iframe_height="300" show_part_of_iframe_width="375" enable_ios_mobile_scolling="true" show_iframe_loader="true" enable_lazy_load="true" browser="iphone,ipad,ipod"]

right - you have 2 problems:

1. By default the "show only a part of a iframe" should not scroll at all if not set. The reason why it scrolls with you setup is that the height and width of the iframe page you use is too small. Normally you should use a height/width where the full iframe is shown. Otherwise set scrolling="no"
2. Width 100%. The area selector should already tell you that this is a bad idea. Because you cut out an area of an iframe. And if you set the width to 100% the iframe is rendered maybe completely different as media selector css e.g. has certain breakpoints where it looks totally different.

So if you like scrolling you have to enable this:
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe#e5

So always use a fixed size for this feature! And than use show_part_of_iframe_allow_scrollbar_vertical="true"

And now we come to the mobile devices. Because a fixed size does not look good on mobile most of the time.
So zoom for this feature is what solves this:
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe/show-only-a-part-of-an-iframe-zoom
show_part_of_iframe_zoom = "true" is the setting you need there.

So I'm not sure if you really need 2 configurations! But getting this to work is not really easy also as you see on all the different settings you need.

Please tell me if it works as you setup is really using may features at once...

Best, Michael

Michael,

I would like to discuss retaining you to get this iframe thing working. I'm not having any success. Would you kindly reply to me off list at sselip@principalconsultingllc.com to discuss retention and rates? The web page I want to embed is http://islandslowp.bbstats.pointstreak.com/standings.html?leagueid=951. Without the embed, it displays ok on mobile devices, but is not stylistically appealing. My efforts are to embed it, cut out the unattractive headings, and have it scroll horizontally on iPhone and native Android browsers.

Thank you,

Stu

By the way, the only thing working the way I want it to so far is chrome on my Samsung Galaxy s5. I'm using this short code, and the 100% for width is necessary, or there is no horizontal scrolling.

[advanced_iframe securitykey="fa125e1276ec88c24847311636ece0f044a93aab" use_shortcode_attributes_only="true" src="http://islandslowp.bbstats.pointstreak.com/standings.html?leagueid=951" id="advanced_iframe" height="2000" width="100%" scrolling="auto" show_part_of_iframe="true" show_part_of_iframe_x="22" show_part_of_iframe_y="200" show_part_of_iframe_height="1700" show_part_of_iframe_width="100%" show_part_of_iframe_zoom="true" show_iframe_loader="true" enable_ios_mobile_scolling="true" browser="mobile"]

check your e-mail