0

Android and vertical scrollbar

asked 2012-05-23 08:50:41 +0800

andij62 gravatar image andij62
315 1 7

Hi all,

i have a Appplication written in zk6. It Works fine on iphone and ipad! My great Problem is that on Android the scrollbar don't work! I set "overflow:auto" but its has no effect. What can i do? This is very important for me! Please help me!

Regards Andi

delete flag offensive retag edit

8 Replies

Sort by ยป oldest newest

answered 2012-05-23 09:26:39 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

Google search led me to these similar 2 stackoverflow questions. Read here and here. In short it is not natively supported so please use custom solution to add scrolling for Android browser.

link publish delete flag offensive edit

answered 2012-05-23 09:53:00 +0800

andij62 gravatar image andij62
315 1 7

Hi Ashish,

thank you for the answer. Is it possible to give me a little example with iscroll or touchscoll to implement in zk?

Regards Andi

link publish delete flag offensive edit

answered 2012-05-24 18:28:53 +0800

andij62 gravatar image andij62
315 1 7

Hi all,

this is the code to implement iScroll in HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: simple</title>

<script type="text/javascript" src="../../src/iscroll.js"></script>

<script type="text/javascript">

var myScroll;
function loaded() {
	myScroll = new iScroll('wrapper');
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

/* * * * * * * *
 *
 * Use this for high compatibility (iDevice + Android)
 *
 */
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
/*
 * * * * * * * */


/* * * * * * * *
 *
 * Use this for iDevice only
 *
 */
//document.addEventListener('DOMContentLoaded', loaded, false);
/*
 * * * * * * * */


/* * * * * * * *
 *
 * Use this if nothing else works
 *
 */
//window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false);
/*
 * * * * * * * */

</script>

<style type="text/css" media="all">
body,ul,li {
	padding:0;
	margin:0;
	border:0;
}

body {
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	font-family:helvetica;
}

#header {
	position:absolute; z-index:2;
	top:0; left:0;
	width:100%;
	height:45px;
	line-height:45px;
	background-color:#d51875;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	padding:0;
	color:#eee;
	font-size:20px;
	text-align:center;
}

#header a {
	color:#f3f3f3;
	text-decoration:none;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
	position:absolute; z-index:2;
	bottom:0; left:0;
	width:100%;
	height:48px;
	background-color:#222;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
	background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
	background-image:-o-linear-gradient(top, #999, #666 2%, #222);
	padding:0;
	border-top:1px solid #444;
}

#wrapper {
	position:absolute; z-index:1;
	top:45px; bottom:48px; left:0;
	width:100%;
	background:#aaa;
	overflow:auto;
}

#scroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

#scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#scroller li {
	padding:0 10px;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
}
</style>
</head>
<body>

<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
<div id="wrapper">
	<div id="scroller">
		<ul id="thelist">
			<li>Pretty row 1</li>
			<li>Pretty row 2</li>
			<li>Pretty row 3</li>
			<li>Pretty row 4</li>
			<li>Pretty row 5</li>
			<li>Pretty row 6</li>
			<li>Pretty row 7</li>
			<li>Pretty row 8</li>
			<li>Pretty row 9</li>
			<li>Pretty row 10</li>
			<li>Pretty row 11</li>
			<li>Pretty row 12</li>
			<li>Pretty row 13</li>
			<li>Pretty row 14</li>
			<li>Pretty row 15</li>
			<li>Pretty row 16</li>
			<li>Pretty row 17</li>
			<li>Pretty row 18</li>
			<li>Pretty row 19</li>
			<li>Pretty row 20</li>
			<li>Pretty row 21</li>
			<li>Pretty row 22</li>
			<li>Pretty row 23</li>
			<li>Pretty row 24</li>
			<li>Pretty row 25</li>
			<li>Pretty row 26</li>
			<li>Pretty row 27</li>
			<li>Pretty row 28</li>
			<li>Pretty row 29</li>
			<li>Pretty row 30</li>
			<li>Pretty row 31</li>
			<li>Pretty row 32</li>
			<li>Pretty row 33</li>
			<li>Pretty row 34</li>
			<li>Pretty row 35</li>
			<li>Pretty row 36</li>
			<li>Pretty row 37</li>
			<li>Pretty row 38</li>
			<li>Pretty row 39</li>
			<li>Pretty row 40</li>
		</ul>
	</div>
</div>
<div id="footer"></div>

</body>
</html>

Please can somebody help me to convert it in a zul-File. Its very important for me!

regards Andi

link publish delete flag offensive edit

answered 2012-05-25 08:05:34 +0800

andij62 gravatar image andij62
315 1 7

Hi,

i have iScroll implemented in a zul-File but it does not work! The Grid does not show the iScroll-Scrollbar. What is my fault? Can someone help me please!

<?page title="iScroll" contentType="text/html;charset=UTF-8"?>
<?link rel="stylesheet" type="text/css" href="/css/window.css.dsp"?>
<?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>
	<window height="100%" width="100%">
		<caption label="iScroll" >
			<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="bthelp" label="Help" style="font-size:12px;"/>
					</toolbar>
				</hbox>
			</div>
		</caption>
	
		<script type="text/javascript" src="js/iscroll.js" />
		<script type="text/javascript">
 			var myScroll;
			function loaded() {
				myScroll = new iScroll('wrapper');
			}
			
			document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
			document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);				
	    </script>	
  		<style dynamic="true">
			body,ul,li {
				padding:0;
				margin:0;
				border:0;
			}
			
			body {
				font-size:12px;
				-webkit-user-select:none;
			    -webkit-text-size-adjust:none;
				font-family:helvetica;
			}
			
			#header {
				position:absolute; z-index:2;
				top:0; left:0;
				width:100%;
				height:45px;
				line-height:45px;
				background-color:#d51875;
				background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
				background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
				background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
				padding:0;
				color:#eee;
				font-size:20px;
				text-align:center;
			}
			
			#header a {
				color:#f3f3f3;
				text-decoration:none;
				font-weight:bold;
				text-shadow:0 -1px 0 rgba(0,0,0,0.5);
			}
			
			#footer {
				position:absolute; z-index:2;
				bottom:0; left:0;
				width:100%;
				height:48px;
				background-color:#222;
				background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
				background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
				background-image:-o-linear-gradient(top, #999, #666 2%, #222);
				padding:0;
				border-top:1px solid #444;
			}
			
			#wrapper {
				position:absolute; z-index:1;
				top:45px; bottom:48px; left:0;
				width:100%;
				background:#aaa;
				overflow:auto;
			}
			
			#scroller {
				position:absolute; z-index:1;
			/*	-webkit-touch-callout:none;*/
				-webkit-tap-highlight-color:rgba(0,0,0,0);
				width:100%;
				padding:0;
			}
			
			#scroller ul {
				list-style:none;
				padding:0;
				margin:0;
				width:100%;
				text-align:left;
			}
			
			#scroller li {
				padding:0 10px;
				height:40px;
				line-height:40px;
				border-bottom:1px solid #ccc;
				border-top:1px solid #fff;
				background-color:#fafafa;
				font-size:14px;
			}
			
			#myFrame {
				position:absolute;
				top:0; left:0;
			}
		</style>
		<panel id="panel" height="100%" border="normal" sclass="p-vista">
        	<panelchildren>
				<div id="wrapper">
					<div id="scroller">
						<grid>
							<rows>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
								<row>
									<label value="abcdefghijklmnop" />
								</row>
							</rows>
						</grid>
					</div>
				</div>
        	</panelchildren>
        	<toolbar id="tb" sclass="vista" height="44px">
       			<div align="center">
           			<toolbarbutton id="tbwb" label="Test" orient="vertical"/>
        		</div>
        	</toolbar>
    	</panel>	
	</window>
</zk>

link publish delete flag offensive edit

answered 2012-05-26 15:37:45 +0800

andij62 gravatar image andij62
315 1 7

Hi Gurus,

is no one here who can help me?

link publish delete flag offensive edit

answered 2012-05-29 18:40:36 +0800

andij62 gravatar image andij62
315 1 7

Hi all,

someone can at least give a small tip? That would certainly interresant for many!

regards Andi

link publish delete flag offensive edit

answered 2012-05-29 19:37:03 +0800

gekkio gravatar image gekkio flag of Finland
899 1
http://gekkio.fi/blog

There are two problems in your Javascript code:

1. Your code is executed in the wrong page lifecycle phase

You are executing iScroll-related Javascript in DOMContentLoaded phase. ZK adds all components with Javascript, so at that point of the lifecycle the components have not been added yet and the page is empty! So, iScroll will not be able to find the div you are trying to use.

With ZK you must always use zk.afterMount callbacks when running custom Javascript to ensure that ZK has prepared the page correctly:

zk.afterMount(function() {
  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  var myScroll = new iScroll('wrapper');
});

2. You have confused ZK IDs with DOM IDs

Let's say you have this ZUL code:

<div id="wrapper">
</div>

This will NOT create a div element with DOM ID = "wrapped". So, calling new iScroll("wrapper") will not work, because iScroll will not be able to find the div. If you declare an id in ZUL, it will be a ZK ID which will never work with any Javascript libraries (except jQuery if you use custom ZK selector). Component DOM IDs are generated by ZK and assigned automatically. The correct way to fix this is to use an EL expression on the server side so that the Javascript that the browser sees will have the correct DOM ID:

<script>
  zk.afterMount(function() {
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    var myScroll = new iScroll('${wrapper.uuid}');
  });
</script>

The basic idea is that ${wrapper.uuid} will be evaluated server-side to something like this before the Javascript is sent to the browser:

var myScroll = new iScroll('zk_xyz_or_whatever_the_id_is');

This will ensure that the Javascript code will always have the correct DOM ID.

link publish delete flag offensive edit

answered 2012-05-30 07:23:03 +0800

andij62 gravatar image andij62
315 1 7

Hi gekkio,

many thanks for the help! No it works perfect! This is the code:

<?page title="iScroll" contentType="text/html;charset=UTF-8"?>
<?link rel="stylesheet" type="text/css" href="/css/window.css.dsp"?>
<?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>
	<script type="text/javascript" src="js/iscroll.js" />

	<window height="100%" width="100%">
		<panel id="panel" height="100%" border="normal" sclass="p-vista">
        	<panelchildren>
				<div id="wrapper" height="100%">
					<grid>
						<rows>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
							<row>
								<label value="abcdefghijklmnop" />
							</row>
						</rows>
					</grid>
 				</div>
        	</panelchildren>
    	</panel>	
		<script type="text/javascript">
			zk.afterMount(function() {
	    		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
	    		var myScroll = new iScroll('${wrapper.uuid}');
	  		});
		</script>
	</window>
</zk>

Regards Andi

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-05-23 08:50:41 +0800

Seen: 322 times

Last updated: May 30 '12

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