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


Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums Device Forums on April 1st (Developers, see below)

BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com

Developers, for more information about the BlackBerry Developer Community please review Join the Conversation on the BlackBerry Developer Community Forums found on Inside BlackBerry.


Reply
Regular Contributor
Posts: 55
Registered: ‎12-23-2011
My Device: 9900 / PB 2.0641
My Carrier: SFR
Accepted Solution

Prevent scrolling on BB10 - Webworks + BBui.js

[ Edited ]

BB10 Webworks + BBui.js / DevAlpha

 

I'm currently developing a game based on touch events.

While my screen size is set to fit devAlpha in lanscape (1280X760 : height minus 8px), the screen scrolls up/down when I "touch and move" a finger on devAlpha. I want to prevent this.

 

I have read several threads about this (including Adam's) and also read some examples comments, so that I tried these "solutions" with no luck.

 

- Viewport meta definition (in index file) : no height specified.

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

 - "Inhibitor" script ( attempt #1 : first script "as-is" in my main pushed screen script ".JS" file )

/* ---------------
 * disable scroll 
 * ---------------*/
        preventMove = function(evt) {
           evt.preventDefault();
           window.scroll(0, 0);
           return false;
        };
        document.addEventListener('touchmove', preventMove, false);

 - Inhibitor script (attempt #2 : function in my ".JS" file but event listener added to the "ondomready" event within the bb.init() function in the index page.

in my JS file (no event listener added)

/* ---------------
 * disable scroll 
 * ---------------*/
        preventMove = function(evt) {
           evt.preventDefault();
           window.scroll(0, 0);
           return false;
        };

 in the bb.init(); event listener added when dom is ready (my main screen id is 'home')

 

				// Fires "after" styling is applied and "after" the screen is inserted in the DOM
				ondomready : function(element, id) {
					if (id == 'dataOnTheFly') {
						dataOnTheFly_initialLoad(element);
					} else if (id== 'home') {
                       document.addEventListener('touchmove', preventMove, false);
                    }
				}

(I must admit I'm probably lost in the DOM ...)

 

- finally, since my app use divs that fires a function on "ontouchstart" event, I added the "event" parameter in the function call and added a "preventDefault()" as the first line of the script.

One div example in my home.htm page

<img id="lPrint" src="images/pouceG.png" width="175" height="265" ontouchstart="thumbSensor('sL',1,event)">

 thumbsensor script :

    thumbSensor = function(place,state,evt) {
        currLR = place;
        // what pad/dock
        window[place] = state;
        // what's its value
    
        /* ------------------------------------------
         *  thumbs dock / started / thumb ITA states
         * ------------------------------------------ */
            if(evt = 'ontouchstart'){ // prevent scrolling
                alert('onTS'); // => Testing, and Yes, it is displayed right//
                evt.preventDefault();
                window.scroll(0,0);
                return(false);            
            } [...] }

 

When I check the Chrome console using the last option, this is what I get (side note: why the webworks ready event is fired so many times - about 10 ?) :

Capture.PNG

 

Now, I believe either I missed something big (probably) or the proper way to do so or ...
Can someone help ?

 

 

Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Prevent scrolling on BB10 - Webworks + BBui.js

For me this is an issue I requested for in bbUI.js since I think it has to do with the "bounce" of the iScroll used on each screen. This setting is "true" by default, so every single screen using iScroll is bouncing outside of the boundaries of the screen, also if the screens height isn't as high as the device height.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Regular Contributor
Posts: 55
Registered: ‎12-23-2011
My Device: 9900 / PB 2.0641
My Carrier: SFR

Re: Prevent scrolling on BB10 - Webworks + BBui.js

Thanks LBP. Is there a way we can disable iScroll?
Highlighted
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Prevent scrolling on BB10 - Webworks + BBui.js

Maybe the only thing to be done is to overwrite the bounce effect of iScroll to be false by default in this line (7010) in github next version of bbUI.js.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Prevent scrolling on BB10 - Webworks + BBui.js

If you need to override touch events in bbUI you will have to turn of screen scrolling effects using  data-bb-scroll-effect="off" on the screen element: https://github.com/blackberry/bbUI.js/wiki/Screens

 

Currently iScroll is used for scrolling effects and will be taking over touch inputs for scrolling of a screen.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Regular Contributor
Posts: 55
Registered: ‎12-23-2011
My Device: 9900 / PB 2.0641
My Carrier: SFR

Re: Prevent scrolling on BB10 - Webworks + BBui.js

[ Edited ]

I missed it big. Thank you Tim.

 

As for my problem, please note Tim's solution will allow to use the simple script option, as described in Adam's post.