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
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Not able to focus on button again when after it inserted on table

9700.png1.png2.png

 

 

 

 

Hi i am developing an app in which on image then one button . then list (scrollabe). in initial focus come to image and then to button then go to scrollble list ..but when i am in top of list then focus is not move button or image i will share yoy my code..

 

 

body...............................................

 

 

 

<body onload="GetDepartureStationDashboard()">
<div id="wrapper">
<div class="login_cont">
<div class="home_icon"><a id="200" x-blackberry-focusable="true" onmouseover="buttonHighlight(this);" onmouseout="buttonUnHighlight(this);" href="index.html"><img src="images/back-icon.png" alt="Home" title="Home" /></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 id="100" x-blackberry-focusable="true" onmouseover="buttonHighlight(this);" onmouseout="buttonUnHighlight(this);" name="" type="button" class="heading_btn fr" value="Change" onclick="location.href='index.html'"/>
<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%">NEXT STATION</td><td width="5%">STATUS</td>
</tr>
</table>
</div>

<div class="scroll-pane" id="mainBodyDiv">
<div>

<!--img src="images/ajax-loader.gif" id="loadingImg" visible =true style="margin:auto; position: absolute; left:50%; top:50%;"/-->

</div>
</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>

 

 

 

script

 

 

function scroll(ln)
{
var elm = document.getElementById("mainBodyDiv");


var lastFocusId = parseInt(blackberry.focus.getFocus());



switch(blackberry.focus.getDirection()){
case 2 : // up
if(lastFocusId > 1 ){ //lastFocusId less than first element and greater than last element
blackberry.focus.setFocus((lastFocusId-1)+"");

highlight(lastFocusId-1);
unhighlight(lastFocusId);
}else{
unhighlight(lastFocusId);


}

elm.scrollTop -= 32; //height of single <li> element
break;
case 3 : // down
if(lastFocusId > 0 && lastFocusId <arraylength){
blackberry.focus.setFocus((lastFocusId+1)+"");

highlight(lastFocusId+1);
unhighlight(lastFocusId);
}
//alert("Down");
elm.scrollTop += 32;
break;
}
}

function GetDepartureStationDashboard_callBack()
{
//alert("Hiii");
var j=0;
arraylength=20;
//document.getElementById('loadingImg').style.visibility = "hidden";
var tabledata = "";
tabledata += "<table >";
for (var i = 0; i < 20; i++)
{
j+=1;
tabledata += ""
tabledata += "<tr style=\"height:30px\" x-blackberry-focusable=\"true\" id="+j+" x-blackberry-onUp=\"scroll(50)\" x-blackberry-onDown=\"scroll(50)\">";

tabledata += "<td width=\"30%\"> <a href=\"www.google.com\">"+i+"</a> </td>";
//tabledata += "<td width=\"30%\">" + i+10 + " - " + i+50 + "</td>";
//tabledata += "<td width=\"35%\">" +i+30 + " (" +i+40+ ")" + "</td>";
//if(r[i].schDepart == r[i].expDepart)
//tabledata += "<td width=\"5%\" align=\"left\"><img src=\"images/correct-icon.png\" width=\"24\" height=\"24\" /></td>";
//else
//tabledata += "<td width=\"5%\" align=\"left\"><img src=\"images/error.png\" width=\"24\" height=\"24\" /></td>";
tabledata += "</tr>";

}
tabledata += "</table>";
document.getElementById("mainBodyDiv").innerHTML = tabledata;
}

function highlight(e) {
//alert("highlight"+e);
document.getElementById(e).style.backgroundColor = "#440503";
//e.setAttribute("style", "background-color: red; outline: cyan solid thick;");
}

function unhighlight(e) {
//alert("unhighlight"+e);
document.getElementById(e).style.backgroundColor = "#FFFFFF";
// e.setAttribute("style", "");
}

 

 

function buttonHighlight(e) {
//alert("highlight"+e);
//document.getElementById(e).style.backgroundColor = "#440503";
e.setAttribute("style", "background-color: red; outline: cyan solid thick;");
}

function buttonUnHighlight(e) {
//alert("unhighlight"+e);
//document.getElementById(e).style.backgroundColor = "#FFFFFF";
e.setAttribute("style", "");
}

Highlighted
Developer
Posts: 192
Registered: ‎09-23-2009
My Device: 9860/PlayBook/Dev Alpha
My Carrier: Plus GSM

Re: Not able to focus on button again when after it inserted on table

Rows which you are adding does not have code to react to onmouseover and onmouseout events. They are required to mark highlight. They are gone or am I missing something?

 

 

BTW There is a insert code button in post editor, it make reading code easier.

Found my post helpfull? Like it! It solves your trouble? Help others and accept it as solution. Search before asking.
My apps: Secret Cod3s | Should my tablet be banned?
--
Jakub Nietrzeba
PGS Software S.A.
Your reliable partner in Poland - IT Outsourcing - BlackBerry, iPhone, Web and Standalone applications