This examples show the "Scrolling iframes on ipad and iphone" features which only available in the pro version of the advanced iframe.
By default scrolling in iframes do not work anymore on ios touch devices like ipad and iphone. The solution is to surround the iframe with an additional div with some ios specific css styles and also change the styles of the iframe.
The following scenarios for scrolling on ipad and iphone are already supported:
- Example 36: Default iframes with loading icon and lazy load
- Example 5: Show only a part of an iframe
- Example 34: Change link targets and show the iframe as layer
- Example 37: Change link targets and show the iframe as layer with additional header
- Example 38: Change link targets and show the iframe as 100% layer with additional footer
- Example 43: Zoom a view port with loading indicator, scrollbars and ios scrolling support (new 7.0.4)
Example 36: Default iframes
Below you see the example of the default iframe with a width of 600px, a height of 400px and scrollbars. Please contact me if your device does not work. Please not that you have to select the iframe before you can scroll.
Currently the zoom feature with scrolling is not supported directly yet as I want to have more feedback for the currently supported scenarios before. Check example 43 where scrolling and zoom is supported.
Below you find the solution with and without the ios fix!
With "Scrolling"
This example does also support the loader icon and lazy load!
The used shortcode is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com/de/demos.php" height="300" width="600" enable_ios_mobile_scolling="true" show_iframe_loader="true" enable_lazy_load="true"]
No "Scrolling"
As you see here also the scrolling="no" is set because otherwise the height and width is ignored. Please check the "Strange behavior on IOS" example below also.
The used shortcode is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com/de/demos.php" height="300" width="600" enable_ios_mobile_scolling="false" scrolling="no"]
Strange behavior on ipad and iphone:
A very strange behavior on ipad and iphone is that if you specify a height and a width a kind of auto content width/height is done even cross domain! This is actually a feature a lot of people would like but no other systems does this and therefore you would have a different behavior only for this devices. so now it is up to you to decide if you use the solution above which looks/works the same everywhere or you decide to have a different solution for ipad and iphone. Right now you can disable this behavior by setting scrolling="no" like in the example before.
The used shortcode is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com/de/demos.php" height="300" width="100%"]