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
New Developer
Posts: 30
Registered: ‎05-04-2011
My Device: PlayBook, Z10, Dev Alpha B, Dev Alpha C
My Carrier: Sprint; wifi only for testing
Accepted Solution

Possible to scroll document vertically in bbui?

I have successfully gotten horizontal div scrolling to work in my bbui app.

 

Is it possible to scroll a page vertically using coordinates?

 

So far, BBUI buttons in the page, overflow Buttons and actionBar links don't scroll using the following javascript, even though these by themselves work directlly on html documents outside the bbui framework:

 

scrollBy(0,300);
parent.window.scrollBy(0,300);

 

There is something, probably iscroll within BBUI capturing any attempts to scroll a page vertically, and it just silently fails. Currently scrollTo(x,y) documentation states only x works, y will be implemented in the future. I'm looking to advance the document to y coordinates.

 

This is to get to a bookmark in a reader app.

===============

Film App: Watch feature length Public Domain and Indie Films in your Blackberry Tablet, share, and post comments - with no ads: http://appworld.blackberry.com/webstore/content/42793
Contributor
Posts: 35
Registered: ‎09-15-2012
My Device: AT&T Torch 9810
My Carrier: AT&T

Re: Possible to scroll document vertically in bbui?

It seems from the docs vertical scrolling isn't supported Smiley Sad https://github.com/blackberry/bbUI.js/wiki/Screens

I know iscroll supports vertical scrolling for sure. I would find the source that handles scrolling and find out why it doesn't work for y and possibly patch it.

 

New Developer
Posts: 30
Registered: ‎05-04-2011
My Device: PlayBook, Z10, Dev Alpha B, Dev Alpha C
My Carrier: Sprint; wifi only for testing

Re: Possible to scroll document vertically in bbui?

[ Edited ]

Someone clicked "Solved" in the answer, which suggests vertical scrolling is not possible. That answer is not correct. I just have to apply some creativity.

 

I simply added extra <div> tags to surround my content above the ActionBar in my bbui documents. It took a lot of research, but using some very esoteric javascript I can now find the total number of pixels within this div container. I can also scroll down by the number of exact pixels so that my bookmarking function will take a user back to a space they have marked. This works in the Dev Alpha C and Dev Alpha B both horizontal and vertical orientations.

 

For purposes of testing, I placed a few bbui styled buttons in various places in this container, to see if they would give me the same results. They return the same values when in portrait mode anywhere on the document. They also return the same values anywhere when in landscape mode. Each time I press the button the alert tells me how much total pixel height in this container. Initially I was chasing offsets. It turned out I can successfully use scrollHeight in WebWorks and BBUI styling:

 

<script>
/*This gives me the total height of the requested div*/
function listOffsets() {
var divTotalHeight = document.getElementById('totalHeight');
alert('totalHeight.scrollHeight: '+divTotalHeight.scrollHeight);
}
</script>

<h3><div data-bb-type="button" data-bb-img="images/icons/listOffsets.png"  onclick="listOffsets();" />listOffsets()</h3>

 

 

Then I placed buttons throughout my content to see how much distance from the top, as I scrolled and clicked, it correctly returned the number of pixels from the top of the visible screen.

 

<script>
//This gives me the scrolled pixels in my div container 
function bookMarkedLocation() {
var thisHigh = document.getElementById('totalHeight').scrollTop;
alert('This many pixels to the top: '+thisHigh);
}
</script>


<h3><div data-bb-type="button" data-bb-img="images/icons/offset.png" onclick="bookMarkedLocation();" />bookMarkedLocation()</h3>

 

These javascript pieces told me how much total height and exact clicked height in my div containers. Now I simply pick a pixel amount to scroll to, and my bookmark function works!

 

<script>
//Choose how many pixels to scroll from the top of this BBUI document
function bookMarkScroll(pixelsToScrollBy) {
var sTM = document.getElementById ('totalHeight');
sTM.scrollTop = pixelsToScrollBy;
}
</script>

<div onclick="bookMarkScroll(15000);" data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="images/icons/nfc.png">Go to BookMark</div>

 

In the above script I chose 15 thousand pixels to scroll by, so I could test out the 15 thousand pixel mark. As a reference, an app I packaged gave me 66869 pixels height in Dev Alpha C. The same app gave me 66591 pixels high in Dev Alpha B Portrait orientation and 19077 pixels high in landscape orientations.

 

The next steps are to save clicked bookmark points and orientation to local sqllite database, then display these next time, and go to these exact pixels in document, along with their proper orientation.

 

The hard work was correctly using the appropriate javascript. This way I can use my scripts to scroll without depending on iScroll, hidden deep within bbui.js

 

Total height in pixels can be used in the future to create a subtle scrolling animation and ease to stop at the final pixel height instead of just jump cutting straight to that place.

 

You actually can scroll by pixel based amounts in WebWorks with BBUI styling. It just takes a few extra steps.

===============

Film App: Watch feature length Public Domain and Indie Films in your Blackberry Tablet, share, and post comments - with no ads: http://appworld.blackberry.com/webstore/content/42793
Contributor
Posts: 35
Registered: ‎09-15-2012
My Device: AT&T Torch 9810
My Carrier: AT&T

Re: Possible to scroll document vertically in bbui?

I'm glad you were able to find a work around. However, I wrote that it's not supported(not impossible) and that's verbatim from bbUI docs. Obviously it's not an elegant solution as you've said yourself. You'll come to find you'll to employ more of esoteric code to get the flexibility you seek.

 

PS: Afaik,  only the post author can click solved to their own post.