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: 27
Registered: ‎06-14-2010
My Device: bold 9700
My Carrier: Telcel
Accepted Solution

Focus Based Widget not Working on Real Devices

Hello

 

Recently I've been developing a widget application that uses Focus Based Navigation, and everything seemed to be OK (I tested completely the application using Simulator) until I deployed the application to a Real Device, The app interface consists mostly of  tr tags with blackberry-focusable = true and onclic event properties to make all the magic happens, I use the hover CSS property to change the tr background image when it gain focus.

 

The problem is that when I installed and tested the application on a real device this effect is not working, seems like the tr is getting focus but there are no visual changes, I have tested on Bold 9000 and Bold 9700 physical devices.

 

this is one of my tables HTML:

 

<div>
 <table width="100%">
  <tr onclick="document.location.href='items.html';" class="ListItem" x-blackberry-focusable="true"><td>All Items</td></tr>
  <tr onclick="AddItem();" class="ListItem" x-blackberry-focusable="true"><td>Add New Item</td></tr>
 </table>
</div>

 

 

And my css:

 

.ListItem
 {
  color:#FFFFFF;
  text-align:center;
  width: 480px;
  height: 30px;
  background: url("../img/itembgnd.png") no-repeat 0 0;
 }
 
 .ListItem:hover
 {
  background-position:0 -30px;
 }

 

 

Any advice will be much appreciated.

Thanks.

Developer
Posts: 48
Registered: ‎08-31-2010
My Device: 8530
My Carrier: Sprint

Re: Focus Based Widget not Working on Real Devices

Im not sure if the hover tag is supported or not, I do know that I could not get it to work the way I wanted it to though. You can however use the onmouseover and onmouseup functions. Blackberry reads them in the same manner you are trying to use them.

 

I think this is how I did it but I have another project up right now and don't want to close it ....

 

<a href="#" 
onmouseover="document.getElementById('Imga').src='Images/resetf.png'" 
onmouseout="document.getElementById('Imga').src='Images/reset.png'" 
onclick="Imga_onclick()">

<img src="Images/image.png" border="0"
id="Imga" />

</a>

 You just have to deal with the blue link outline in css...

Developer
Posts: 27
Registered: ‎06-14-2010
My Device: bold 9700
My Carrier: Telcel

Re: Focus Based Widget not Working on Real Devices

Timothy I went with your suggestion, at the end this is the way I implemented it:

 

<table>

     <tr onclick="ShowInfo();" class="ListItem" x-blackberry-focusable="true"

     onmouseover="this.style.backgroundPosition = '0px -30px';"

     onmouseover="this.style.backgroundPosition = '0px 0px';" >

...

...

 

 

This way I can get the same behavior like using the Hover property for changing my image position.

 

And to deal with the blue outline I just leave the ListItem:Hover property  with no content in my CSS.

 

ListItem:hover{ }

 

So, i think Hover property is not fully implemented  in BB Browser yet.

Hope this helps others.

 

Thanks.