iOS webview won't scroll down
I am making a system similar to Silverlight's Deep Zoom, in which a very high resolution image is broken into chunks at varying resolutions to allow the impression of scaling from the image filling the screen, to a very detailed portion at any given point. I was frustrated by the lack of a multi scroll option in Android, so I switched to web view. Now it works in Android, but not in iOS. In Android, I can scroll around in both directions, but when I try to scroll down in iOS, it bounces back up as if it is at the end. I tried setting the height to a ridiculous number (5000) but it had no effect. Here is what I am doing now:
var win = Ti.UI.createWindow();
win.orientationModes = [ Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT ];
var webview = Ti.UI.createWebView({
width:'auto',
height:5000,
top:0,
touchEnabled:true,
scalesPageToFit:false,
url:'index.html'
});
win.add(webview);
win.open();
index.html looks like this:
<html>
<style>
img {
padding:0;
margin:0;
float:left;
}
</style>
<body>
<div style="width:1930px;height:640px">
<img src="Layer_3/images/Slice_01.png" width=960 height=640>
<img src="Layer_3/images/Slice_02.png" width=960 height=640>
</div>
<div style="width:1930px;height:640px">
<img src="Layer_3/images/Slice_03.png" width=960 height=640>
<img src="Layer_3/images/Slice_04.png" width=960 height=640>
</div>
</body>
</html>
What is going on here?
1 Answer
-
Hello,
Provide scalesPageToFit : true and height of the image in html file as much require to show the partally image in a web view at a time, It will automatically scroll image up and down , when you start zooming the images or when its image size is too big. For this use 1.7.5 or above sdk . You can also try code which i had provided you. .If you want more help then plz let me know .Webview automatically listen pinch gesture and by default provide zoom in and out functionality , for this you don't want to put any efforts . All this is possible in titanium using webview. Accept answer if you find usefull … This things work for me.
var webview = Ti.UI.createWebView({
width : 100,
height : 600,
top : 0,
backgroundColor:'#00000000',
scalesPageToFit:true,
touchEnabled: true,
});
wdt = 100;
hgt = 200;
img_pth = 'view5_background.png'; // Insert your image url.
webview.html = '<html><body> <img src="images/'+img_pth+'" width='+wdt+' height='+hgt+'></body></html>';
win.add(webview);
Regards
Moiz