-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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
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
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>
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');
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
Asked: 2012-05-23 08:50:41 +0800
Seen: 322 times
Last updated: May 30 '12