Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post

    make screen unscrollable

    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:

    Code:
    <!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:
    Code:
    <body {overflow:hidden} >

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Try html, body {overflow: hidden;} ?

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    62
    Thanks
    0
    Thanked 12 Times in 12 Posts
    First of all
    PHP Code:
    <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

    PHP Code:
    document.ontouchstart=document.onmousedown=preventer;
    function 
    preventer(e){    
                    if(!
    e){e=window.event;}
            
    e.preventDefault();
                    
        } 
    EDIT:
    To make it more realistic use this also
    PHP Code:
    window.scrollTo(0,0,0); 
    So your url bar will dissapear

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    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


    I have tried the following css
    Code:
    <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:

    Code:
    <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);  
    ?>

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,915
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    This is not php - it is Javascript. Labrar used the wrong tags.

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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    62
    Thanks
    0
    Thanked 12 Times in 12 Posts
    Thats true
    Sorry

  • #7
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    It does work! Many thanks.

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

    Code:
    <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>

  • #8
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    This is not php - it is Javascript. Labrar used the wrong tags.

    Code:
    <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.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If you just want to prevent dragging then this might work:

    Code:
    document.ontouchmove = function (e) {
        e.preventDefault();
    };
    ..but I don't program for phones myself.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If you want to continue to allow dragging of specific elements then it might be something like this:

    Code:
    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
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    Thanks, but in either case, the screen keeps scrolling in Android simulation.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •