0

iPad - iFrame can not scroll

asked 2012-07-06 16:22:23 +0800

andij62 gravatar image andij62
301 1 6

Hello,

scrolling in iframe on ipad/iphone don't work. Is there any workaround available?

Thanks for the help!

Andi

delete flag offensive retag edit

7 Replies

Sort by ยป oldest newest

answered 2012-07-07 20:28:26 +0800

andij62 gravatar image andij62
301 1 6

Have anyone an idea? Its very important for me!

Thx

link publish delete flag offensive edit

answered 2012-07-09 01:45:44 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

updated 2012-07-26 09:32:50 +0800

Hi Andi,

How do you scroll the iframe? By one finger or two? (where 'one' is scroll and 'two' is move, if memory serves)

However, this may caused by the size of iframe not matched to its content, something like below may work:

<zk xmlns:w="client">
	<script type="text/javascript">
		function fixSize(wgt) {
			setTimeout(function () {
				var iframe = wgt,
					iframeHTML = iframe.contentWindow.document.lastChild;
				iframe.style.width = "";
				iframe.style.height = "";
				iframe.style.width = (iframeHTML.scrollWidth+10) + "px";
				iframe.style.height = (iframeHTML.scrollHeight+10) + "px";
			}, 0);
		}
	</script>
	<iframe id="iframe" src="http://localhost:8081/zksandbox/test.zul" xmlns:ca="client/attribute"
		ca:onload="fixSize(this);">
	</iframe>
	<button label="change src">
		<attribute name="onClick">
			iframe.setSrc("http://localhost:8081/zksandbox/test2.zul");
		</attribute>
	</button>
</zk>

Regards,
Ben

link publish delete flag offensive edit

answered 2012-07-09 12:18:15 +0800

andij62 gravatar image andij62
301 1 6

Hi Ben,

thanks for your answer, but it does not work. I scroll with one finger. I set the "src" from the iFrame in Controller because the src changes often. Here is my code with your example:

<?page title="iframe_scroll"?>
<?meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" ?>
<?meta name="apple-mobile-web-app-capable" content="yes" ?>
<?meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" ?>
<zk xmlns:w="client">
<window id="pdfWin" height="100%" width="100%" apply="iframe.testCtrl">
	<caption label="mybigpoint" image="img/mini_logo.png">
		<div sclass="z-toolbar" style="padding:0">
			<hbox pack="stretch" width="100%">
				<toolbar align="start" style="float:left; border-style: none;"></toolbar>
				<toolbar align="center" style="float:left; border-style: none;"></toolbar>
				<toolbar align="end" style="float:right; border-style: none;" >
					<button id="btclose" label="Close" style="font-size:12px;"/>
				</toolbar>
			</hbox>
		</div>
	</caption>
<style dynamic="true">
body {
	padding:0px;
}
.z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover {
    background-color:transparent;
    border:0 none;
}
</style>
	<iframe id="iFrame">
		<attribute w:name="bind_">
			function (desktop, skipper, after) {
				this.$bind_(desktop, skipper, after);
				setTimeout (function () {
					var iframe = this.$n(),
						iframeHTML = iframe.contentWindow.document.lastChild;
	                iframe.style.width = "";
	                iframe.style.height = "";
	                iframe.style.width = (iframeHTML.scrollWidth+10) + "px";
	                iframe.style.height = (iframeHTML.scrollHeight+10) + "px";
				}, 100);
			}
		</attribute>
	</iframe>
</window>
</zk>

	public void onCreate() throws Exception {
		iFrame.setSrc("http://www.zkoss.org/");

Please have a look on the code and give me a tip!

Andi

link publish delete flag offensive edit

answered 2012-07-26 09:32:11 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Hi Andi,

Please try this (only works in the same domain):

<zk xmlns:w="client">
	<script type="text/javascript">
		function fixSize(wgt) {
			setTimeout(function () {
				var iframe = wgt,
					iframeHTML = iframe.contentWindow.document.lastChild;
				iframe.style.width = "";
				iframe.style.height = "";
				iframe.style.width = (iframeHTML.scrollWidth+10) + "px";
				iframe.style.height = (iframeHTML.scrollHeight+10) + "px";
			}, 0);
		}
	</script>
	<iframe id="iframe" src="http://localhost:8081/zksandbox/test.zul" xmlns:ca="client/attribute"
		ca:onload="fixSize(this);">
	</iframe>
	<button label="change src">
		<attribute name="onClick">
			iframe.setSrc("http://localhost:8081/zksandbox/test2.zul");
		</attribute>
	</button>
</zk>

Regards,
Ben

link publish delete flag offensive edit

answered 2012-07-29 17:16:19 +0800

andij62 gravatar image andij62
301 1 6

Hi Ben,

thanks, now it works!

regards,
Andi

link publish delete flag offensive edit

answered 2012-10-12 15:18:22 +0800

RichardL gravatar image RichardL
768 4

Nice, Ben. This will be handy to use. Maybe this functionality could be incorporated as an attribute of the iframe component (like autoSize = true/false)?

link publish delete flag offensive edit

answered 2012-10-15 01:47:49 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Hi Richard,

I've created a feature request: Add an attribute to make iframe sized by content

Regards,
Ben

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2012-07-06 16:22:23 +0800

Seen: 813 times

Last updated: Oct 15 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More