Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 21
Registered: ‎04-26-2012
My Device: BlackBerry 9800
My Carrier: BlackBerry

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

Is it possible to get alert on this event?

Contributor
Posts: 41
Registered: ‎05-03-2012
My Device: 9800 torch
My Carrier: -

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

Hi

I have done the same in my html page

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

 

 

but my page is still showing scroll icon at bottom of the page and the it still little scrollable.

 

If i load any list in this screen than it is quite hard to scroll that list because of screen is also scrolling on scroll of device.

 

Please help.

Contributor
Posts: 41
Registered: ‎05-03-2012
My Device: 9800 torch
My Carrier: -

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="format-detection"content="telephone=no">
<meta name="viewport" content="width=device-width, user-scalable=no" />
        <script type="text/javascript" charset="utf-8" src="js/map_image.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/stouch.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.xml2json.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/defines.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/common.js"></script>
 
        <script type="text/javascript" charset="utf-8" src="js/index.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/appversion.js"></script>
       <link rel="stylesheet" href="css/sencha-touch.css" type="text/css" />
        <link rel="stylesheet" href="css/bb-320.css" type="text/css">

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
            
            //this code move to appversion.js
            });

            function check_device() {
                document.addEventListener('deviceready',onDeviceReady1,false);
            }

            function onDeviceReady1() {
                window.localStorage.setItem('device_platform',device.platform);
                window.localStorage.setItem('device_version',device.version);
                window.localStorage.setItem('connect_type',checkConnection_New());                
                checkConnection(callSucc,callError);
            }

            function callSucc() {
                if(window.localStorage.getItem("imageDownload") == 2) {
                    $("#wrapper").hide();
                    redirectWindow("registration.html");
                } else {
                    window.localStorage.setItem("imageDownload",1);
                    setTimeout('callURLDownload()',1000);
                    $(".pro-btn").show();
                    $(".config_div").hide();
                }
            }

            function callError() {
                alert("network error detected. please try after some time.");
                return false;
            }

            

            

            

            

        </script>
        
    </head>
    <body> <div class="here"><img src="images/img_logo.png" />here for you...<div class="cl"></div></div><div class="hr-line"></div><div class="scroll-here"><div class="ser-exp">when you are with airtel, your service experience is </div><div class="gray-bg">what you want, when you want.</div><div class="nav-here"><ul><li><a href="#"><img alt="" src="images/icon_postpaid.png" />my mobile</a></li><li><a href="#"><img alt="" src="images/icon_dsl.png" />broadband</a></li><li><a href="#"><img alt="" src="images/icon_landline.png" />fixed line</a></li><li><a href="#"><img alt="" src="images/icon_dth.png" />DTH</a></li></ul></div><div class="gray-bg">pay your bills, recharge your phone, start & stop services, raise service requests & do lots more!  because you are special, we also bring to you offers carefully chosen exclusively for you. at airtel, </div><div class="we-are">we are here for you...</div></div>
    </body>
</html>

Contributor
Posts: 41
Registered: ‎05-03-2012
My Device: 9800 torch
My Carrier: -

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

Above is my page which i render on blackberry but it shows me a scroll icon and if i remove the scalable tag then it works fine but i need to stop the zooming of page. This scroll is showing through out the app.

 

Even when i render this app on iphone android these pages works fine and there is not scroll on the screen.

 

 

Please help me out of this.

 

 

Thanks in advance.

Highlighted
Contributor
Posts: 17
Registered: ‎07-21-2012
My Device: Blackberry Passport (Unlocked)
My Carrier: AT&T

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

[ Edited ]

Disable scrolling:

Found a solution.

(Works on Blackberry Playbook)

Here is the jQuery:

$(document).bind('touchmove', function(e) {

    e.preventDefault();

    window.scroll(0,0);

    return false;

});

 

Basically, you are unbinding the webkit "touchmove" event.

 

Here is non-jquery:

document.addEventListener('touchmove', function(e) {

    e.preventDefault();

    window.scroll(0,0);

    return false;

}, false);

 

Also, you want to set margin: 0px; and padding: 0px for both the <body> tag and the container <div>

 

Contributor
Posts: 17
Registered: ‎07-21-2012
My Device: Blackberry Passport (Unlocked)
My Carrier: AT&T

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

[ Edited ]

Just looked at RIM's webworks API.

https://developer.blackberry.com/html5/api/Element.html

 

Add:

window.scroll(0,0);

return false;

 

to that function above.

Contributor
Posts: 41
Registered: ‎05-03-2012
My Device: 9800 torch
My Carrier: -

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

 

 

Hey

 

 

All i found the solution for remove the scroll icon form webworks app by adding this tag to html page.

 

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

 

 

It even stop the zooming as well.

 

 

Thanks

 

Vipin Tomer

Developer
Posts: 119
Registered: ‎05-27-2010
My Device: 9900
My Carrier: Vodafone NL

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

The most likely reason your content (is) was scrolling is because it was overflowing the html/body element and therefore showed scroll bars.
By setting the max scale to .99 and user-scalable to no, you zoomed out a little and that seemed enough to eliminate the overflow + the user-scale:no doesn't allow the user to zoom.

In many cases the overflow is caused by not properly setting the containing divs and/or some typography overflow. (Meaning that in the default block elements the lower g p q elements have a little extra space to fit below)

Try to set you main html elemements (html, body, containint div) to
{ border:0; margin:0; padding:0; display:block; overflow:hidden; vertical-align:bottom;}
There was one other attribute that might help in css, but I don't remember now.
@reumerd-- @BBDevGroupNL -- about me
If you like it, LIKE it ;-) ----- If it's solved, press solved ! --- If you solved it yourself, please let us know! We might have the same problem!
Contributor
Posts: 17
Registered: ‎07-21-2012
My Device: Blackberry Passport (Unlocked)
My Carrier: AT&T

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

A very good point.

 

Another thing that I've discovered:

 

If you want to have an element move and disappear into the side of the screen, then make sure you set "position: relative;" for the container <div> (as well as the margin: 0; padding: 0 for the container <div> and the <body> tag). If you don't set "position" for the container <div> then the animated element will actually be held inside the <body> and not the container <div> (assuming you are using "position: absolute" to control the element's motion along the screen).

 

That minor detail was causing me to have a scrolling isse on the "doubletap" event even after I used the previously posted JavaScript function to prevent the "ontouchmove" event from firing.

Contributor
Posts: 41
Registered: ‎05-03-2012
My Device: 9800 torch
My Carrier: -

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

<meta name="viewport" content="width=device-width, user-scalable=no" />

 

I have above line and still i found the little bit scrolling on the page and when

i used the line with scale .99 than this scroll is fixed sir.

 

 

 

 

 

Thanks

Vipin Tomer