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
Regular Contributor
superfly_fr
Posts: 53
Registered: ‎12-23-2011
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 ?

 

 

Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
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.
Please use plain text.
Regular Contributor
superfly_fr
Posts: 53
Registered: ‎12-23-2011
My Carrier: SFR

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

Thanks LBP. Is there a way we can disable iScroll?
Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
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.
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,701
Registered: ‎10-16-2008
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
Please use plain text.
Regular Contributor
superfly_fr
Posts: 53
Registered: ‎12-23-2011
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.

Please use plain text.