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
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
Accepted Solution

list is not scrolling in non touch device

Hi i want to show list scrollable list in blackberry bold 9700 but not able to do ..please help.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href="style/scrollpanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

function scroll(){

var elm = document.getElementById("mainBodyDiv");
alert(elm);
var lastFocusId = parseInt(blackberry.focus.getFocus());
alert(lastFocusId);

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;
}
}

</script>

</head>
<body>

<div class ="scroll-pane" ; id="mainBodyDiv">
<ul x-blackberry-focusable="true">
<li x-blackberry-focusable="true" id="1" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> a</li>
<li x-blackberry-focusable="true" id="2" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> b</li>
<li x-blackberry-focusable="true" id="3" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> v</li>
<li x-blackberry-focusable="true" id="4" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> d</li>
<li x-blackberry-focusable="true" id="5" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> gf</li>
<li x-blackberry-focusable="true" id="6" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> df</li>
<li x-blackberry-focusable="true" id="7" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> .df</li>
<li x-blackberry-focusable="true" id="8" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> dfg</li>
<li x-blackberry-focusable="true" id="9" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> .df</li>
<li x-blackberry-focusable="true" id="1" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> a</li>
<li x-blackberry-focusable="true" id="12" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> b</li>
<li x-blackberry-focusable="true" id="13" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> v</li>
<li x-blackberry-focusable="true" id="14" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> d</li>
<li x-blackberry-focusable="true" id="15" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> gf</li>
<li x-blackberry-focusable="true" id="16" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> df</li>
<li x-blackberry-focusable="true" id="17" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> .df</li>
<li x-blackberry-focusable="true" id="18" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> dfg</li>
<li x-blackberry-focusable="true" id="19" x-blackberry-onUp="scroll()" x-blackberry-onDown="scroll()"> .df</li>

</ul>
</div>
</body>
</html>

Retired
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: list is not scrolling in non touch device

Merging threads http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Not-able-to-use-lt-li-x-blackber...

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Developer
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810

Re: list is not scrolling in non touch device

Hi sir thanks for reply. i done  scroll list . but i want to show data of web service(this scroll list). i call web service and i have web service data. but i want to show that data is this scroll  list. i get array from ewb service . can you me some suggestion or some help how to do this problem.. becuse after some seconds i get response .

Developer
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810

Re: list is not scrolling in non touch device

Hi i am using this code .. data is coming but list is not scrollable please help...




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Departure Schedule</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
&lt;script type="text/javascript" src="script/common.js">&lt;/script&gt;
&lt;script type="text/javascript" src="script/soapclient.js">&lt;/script&gt;
&lt;script type="text/javascript" src="script/jquery.min.js">&lt;/script&gt;
&lt;script type="text/javascript">

function GetDepartureStationDashboard()
{
var pl = new SOAPClientParameters();
var params = getParams();
var parameter1 = unescape(params["getStationCode"]);
var parameter2 = unescape(params["getStationDesc"]).replace(/[+]/g," ");
document.getElementById("headingcontent").innerHTML = parameter2;
pl.add("parameter1", parameter1);
SOAPClient.invoke(WSDLURL, "GetDepartureStationDashboard", pl, true, GetDepartureStationDashboard_callBack);
}
function GetDepartureStationDashboard_callBack(r)
{
alert(r);
var listdata = "";
//tabledata += "<ul x-blackberry-focusable=\"true\">";
//alert(""+r[0].stationName);
for (var i = 0; i < r.length-1; i++)
{
//
listdata += "<li x-blackberry-focusable=\"true\" id=\"i\" x-blackberry-onUp=\"scroll(r.length-1)\" x-blackberry-onDown=\"scroll(r.length-1)\">" + r[i].stationName + "</li>";
}
//listdata += "</ul>";
alert(listdata);
document.getElementById("iscroller").innerHTML = listdata;
}

&lt;/script&gt;
</head>
<body onload="GetDepartureStationDashboard()">
<div id="wrapper">
<div class="login_cont" x-blackberry-focusable="true">
<div class="home_icon"><a href="index.html"><img src="images/back-icon.png" alt="Home" title="Home" x-blackberry-focusable="true"/></a></div>
<h1 class="fr">Departures</h1>
<div class="cl"></div>
<div class="mid_cont">
<div class="grid_cont">
<div class="heading_bar">
<h1 class="fl" id="headingcontent"></h1>
<input name="" type="button" class="heading_btn fr" value="Change" onclick="location.href='index.html'" x-blackberry-focusable="true"/>
<div class="cl"></div>
</div>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30%">PLATFORM NO.</td><td width="30%">STD - ETD</td><td width="35%">Destination</td><td width="5%">STATUS</td>
</tr>
</table>
</div>
<div class="scroll-pane">

<ul id = "iscroller" x-blackberry-focusable="true">
</ul>

</div>
<div class="grid_error"><img src="images/help-icon.png" /> Departure Schedule</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="hdnStationName" id="hdnStationName" value="" />
</body>
</html>

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

Re: list is not scrolling in non touch device

 

 

Hey ,

 

 

As i am using focus based navigation than my list is scroll in Phonegap app but in that case there is no

pointer showing on screen than how do i select an item to click on screen on touch or non touch device with

trackpad.

 

as i can see the pointer on screen.

 

 

Thanks

 

Vipin

Developer
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810

Re: list is not scrolling in non touch device

can you share your scrolling list code..? actually i also not able to scroll my list.i think you can use onclick="" function



thanks
Developer
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810

Re: list is not scrolling in non touch device

Hi i am not able to call scroll function..can you give me some steps to scroll list..