...

View Full Version : make screen unscrollable



eydg
11-13-2012, 04:32 AM
I want to make an app in html and css and phonegap it.

For a more realistic standalone behavior i need to disable elastic dragging capability (vertical scrolling) at lower resolutions.

How to achieve that?

I found this, but it does not seem to work:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
<script type="text/javascript">
window.addEventListener('load', function() {
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
}, false);
</script>
<title>Mobile Web App</title>
</head>
<body>
<div id="app">
<!-- Add your content here -->
</div>
</body>
</html>


Neither does this:
<body {overflow:hidden} >

VIPStephan
11-13-2012, 09:13 AM
Try html, body {overflow: hidden;} ?

Labrar
11-13-2012, 09:35 AM
First of all

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
should work for the right resolution. (By the way. For a web app you have to use 640 x 920 for Iphones)
It doesn't matter if you convert it with phonegap. Still's just a web app but into the I Store (if apple take it)

Seccond


document.ontouchstart=document.onmousedown=preventer;
function preventer(e){
if(!e){e=window.event;}
e.preventDefault();

}

EDIT:
To make it more realistic use this also

window.scrollTo(0,0,0);
So your url bar will dissapear

eydg
11-14-2012, 05:02 AM
Thank you very much for clarifying this simple fact that some lines of the code are not js, I made an assumption that whatever is not apparent html, it must be js :D


I have tried the following css

<style> html, body {overflow: hidden;}
</style>
and it does remove the vertical scrolling bar from the browser.


I have done the adjustments to the code and run an android simulator, and there seems to be no change. Here's what I typed in:


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">





<?php
document.ontouchstart=document.onmousedown=preventer;
function preventer(e){
if(!e){e=window.event;}
e.preventDefault();
}

window.scrollTo(0,0,0);
?>

Philip M
11-14-2012, 09:10 AM
This is not php - it is Javascript. Labrar used the wrong tags.


<script type = "text/javascript">
document.ontouchstart=document.onmousedown=preventer;
function preventer(e){
if(!e){e=window.event;}
e.preventDefault();
}
</script>

Labrar
11-14-2012, 09:27 AM
Thats true :(
Sorry

eydg
11-14-2012, 06:03 PM
It does work! Many thanks.

In case someone needs it summed up, here it is:



<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type = "text/javascript">
document.ontouchstart=document.onmousedown=preventer;
function preventer(e){
if(!e){e=window.event;}
e.preventDefault();
}
</script>

</head>

<body>


<style> html, body {overflow: hidden; }
</style>

eydg
11-14-2012, 07:25 PM
This is not php - it is Javascript. Labrar used the wrong tags.


<script type = "text/javascript">
document.ontouchstart=document.onmousedown=preventer;
function preventer(e){
if(!e){e=window.event;}
e.preventDefault();
}
</script>


This piece of code does the trick in chrome, but in android simulator stops the app buttons and links from responding.

I wonder if it could be a matter of placement of the piece, but as I changed its location no chance resulted in either of the two environments.

AndrewGSW
11-14-2012, 07:51 PM
If you just want to prevent dragging then this might work:


document.ontouchmove = function (e) {
e.preventDefault();
};

..but I don't program for phones myself.

AndrewGSW
11-14-2012, 07:56 PM
If you want to continue to allow dragging of specific elements then it might be something like this:


document.ontouchmove = function (e) {
var target = e.currentTarget;
if (target.nodeName == 'IMG') {
// or examine ID, etc..
return;
}
e.preventDefault();
};

but, again, I'm not mobile ;)

eydg
11-14-2012, 08:38 PM
Thanks, but in either case, the screen keeps scrolling in Android simulation.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum