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
Contributor
Posts: 21
Registered: ‎10-28-2011
My Device: Bold 9700
My Carrier: Turkcell
Accepted Solution

Scroll issue on lists

Hi!

 

I have a simple fixed size list created with <ul> and <li> tags. I can test only on my Bold 9700, but on that device it cannot scroll the list. What is the problem?

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
</head>
<body>
      <div class="content" style="position: absolute; top: 0; bottom: 0;">
                <ul x-blackberry-focusable="true">
                     <li x-blackberry-focusable="true"> ....</li>
                     <li x-blackberry-focusable="true"> ....</li>
                     <li x-blackberry-focusable="true"> ....</li>
                     <li x-blackberry-focusable="true"> ....</li>
                     <li x-blackberry-focusable="true"> ....</li>
                     <li x-blackberry-focusable="true"> ....</li>
                     <li x-blackberry-focusable="true"> ....</li>
                     <li x-blackberry-focusable="true"> ....</li>
                     <li x-blackberry-focusable="true"> ....</li>
                </ul>
       </div>
</body>
</html>


Developer
Posts: 66
Registered: ‎09-14-2011
My Device: Simulator
My Carrier: Developer

Re: Scroll issue on lists

even i have the same peoblem so what i did is

 

added the onUp and onDown

<div class="content" style="position: absolute; top: 0; bottom: 0;" id="mainBodyDiv">
                <ul x-blackberry-focusable="true">
                     <li x-blackberry-focusable="true"  id="1"  x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> ....</li>
                     <li x-blackberry-focusable="true"  id="2"  x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> ....</li>
                     <li x-blackberry-focusable="true"  id="3"  x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> ....</li>
                     <li x-blackberry-focusable="true"  id="4" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> ....</li>
                     <li x-blackberry-focusable="true"  id="5" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> ....</li>
                     <li x-blackberry-focusable="true"  id="6" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> ....</li>
                     <li x-blackberry-focusable="true"  id="7" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> ....</li>
                     <li x-blackberry-focusable="true"  id="8" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> ....</li>
                     <li x-blackberry-focusable="true"  id="9" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> ....</li>
                </ul>
       </div>

  adn in the script i managed this onUp and onDown to scroll the div

 

function scroll(){
    
    var elm = document.getElementById("mainBodyDiv");
    var lastFocusId = parseInt(blackberry.focus.getFocus());
    
    switch(blackberry.focus.getDirection()){
         case 2 : // up
            if(lastFocusId < 1 && lastFocusId > 9) //lastFocusId less than first element and greater than last element
                blackberry.focus.setFocus((lastFocusId-1)+"");
            elm.scrollTop -= 50; //height of single <li> element
         break;
         case 3 : // down
            if(lastFocusId > 0  &&  lastFocusId < 9)
                blackberry.focus.setFocus((lastFocusId+1)+"");
             elm.scrollTop += 50;
         break;
     }
}

 i recommend you to generate the list in javascript dynamically in an array and give that array as input to the scroll function so that even if you want to add elements latter or generate the list based on some response from server it will be very helpful

Retired
Posts: 518
Registered: ‎07-18-2011
My Device: Bold
My Carrier: Rogers

Re: Scroll issue on lists

I assume you mean scrolling with navigation as opposed to a cursor?

Have you specified the rim:navigation element in your config.xml?



1.Please resolve your thread by clicking the "Accept as Solution" button below the post which solved your problem!
2. If any post helps you please click the button below the post(s)
Contributor
Posts: 46
Registered: ‎05-03-2011
My Device: 9930, PlayBook
My Carrier: Verizon

Re: Scroll issue on lists

Do you have navigation mode enabled in your config.xml?

 

  <rim:navigation mode="focus" /> 

Developer
Posts: 66
Registered: ‎09-14-2011
My Device: Simulator
My Carrier: Developer

Re: Scroll issue on lists

ohooo yeh i forgot the basic thing to be checked 1st

<rim:navigation mode="focus" />

inside config file
Contributor
Posts: 21
Registered: ‎10-28-2011
My Device: Bold 9700
My Carrier: Turkcell

Re: Scroll issue on lists

Thanks four your replies but I've already have that line. Smiley Sad

Contributor
Posts: 32
Registered: ‎10-03-2011
My Device: 9900
My Carrier: developer

Re: Scroll issue on lists

hi,

  

   Go for config.xml and select the checkbox(use focus-based navigation on trackpad/trackball smartphones) .

Contributor
Posts: 21
Registered: ‎10-28-2011
My Device: Bold 9700
My Carrier: Turkcell

Re: Scroll issue on lists

It was hard to manage it with your solution but it worked! Thanks Smiley Happy
Developer
Posts: 66
Registered: ‎09-14-2011
My Device: Simulator
My Carrier: Developer

Re: Scroll issue on lists

well if you use javascript inorder to create the list then it wont be hard Smiley Happy

glad i could be of help Smiley Happy
Regular Contributor
Posts: 60
Registered: ‎03-07-2011
My Device: Not Specified

Re: Scroll issue on lists

@onelord2002 Does this same fix also work for the PlayBook for unordered lists?  I thought that the navigation focus was only useful for devices with a trackpad.  My issue with the PlayBook is that I have an unordered list within a div which scrolls properly in Chrome, but not at all on the PlayBook.