09-03-2010 09:11 PM
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:
<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>
And my css:
background: url("../img/itembgnd.png") no-repeat 0 0;
Any advice will be much appreciated.
Solved! Go to Solution.
09-04-2010 12:03 PM
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='I mages/reset.png'" onclick="Imga_onclick()">
<img src="Images/image.png" border="0"
You just have to deal with the blue link outline in css...
09-04-2010 08:35 PM
Timothy I went with your suggestion, at the end this is the way I implemented it:
<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.
So, i think Hover property is not fully implemented in BB Browser yet.
Hope this helps others.