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
fenimor
Posts: 11
Registered: ‎03-18-2010
My Device: bold 9700

Background image on link:hover

I'm trying to apply backgound image for links in focus based navigation mode using css :

 

li a:hover {
    background: url(bgmenu.gif) repeat-x transparent;

}

 

This kind of code works perfectly in any browser (FF, IE. chrome),  but after comping a wdget the backgound image on hover state does not show up. Meanwhile, If I add  'backgound-color' property - it works fine.

 

 

 

 

Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Background image on link:hover

You are correct.. background color can be set on CSS hover, but unfortunately not the background image.   

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Contributor
fenimor
Posts: 11
Registered: ‎03-18-2010
My Device: bold 9700

Re: Background image on link:hover

[ Edited ]

it's a pity.

Is there any other way to mimic natural BB look of list select (e.g. like settings list which uses color gradient) ?

 

Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Background image on link:hover

Hi fenimor,

 

Yeah, not being able to change on the background image on hover can make things a bit tricky.  I can let you know some different approaches I typically take.  It all depends on the scenario and weighing the trade-offs for each.

 

1) The best performing 

In this case I typically choose a background color for the div for ":hover" that is light enough so that the fonts of the text displayed in the div don't have to change color.. For instance, the font color can stay black and don't have to turn white for contrast

 

2) Middle ground

In this scenario I use a darker highlight color (more like the blue system highlight color) that I set for the background color for the div on ":hover".  An issue that I found is that if you change the foreground color on ":hover" via CSS it doesn't cascade down to the elements nested inside the div :smileysad:  So in this case I trap the onmouseover and onmouseout events and toggle the text font color for the nested elements via JavaScript.  This does take a performance hit compared to option #1

 

3) Best looking with Gradient Image

Another issue with the background image that I found (which I think is related to the fact that the background image doesn't change on :hover) is that even if you set the background image for an element via JavaScript it doesn't paint the change.  Apparently the bug in the browser that is related to both of these issues is that a repaint flag doesn't get set when the background image changes and so it doesn't repaint the element.  So in order to do a gradient image for highlight you will need to create an image with an absolute position to cover your div.  You will then have to set its z-order to 0 and a <div> that contains the foreground text with a z-order of 1.  Then, like in option #2 you will have to trap the onmouseover and onmouseout of the <div> and either change the "src" of the <img> or toggle it's visibility.  While making this change you would also change the font colors for contrast.

 

In option #3 I would also recommend pre-loading your highlight image via hidden <img> tags or using the Image() object so that it doesn't have to retrieve the image during the JavaScript events.  For #3 to work, it will take a little bit of fiddling around to get it look just the way you want.

 

Hopefully that gives you some ideas. 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Contributor
fenimor
Posts: 11
Registered: ‎03-18-2010
My Device: bold 9700

Re: Background image on link:hover

All I need is a simple navigaion - so option #1 is enough.

 

BTW. when I change font color on :hover - e.g. from black to white with dark background -- it noticeably slows down the navigation from one link to anohter (especially if link text is relatively long). Why it takes so long to redraw?

 

Another problem I've encountered - when I have a long html text without any focusable elements (e.g. pure text) - then in focus based navigation page scrolling does not work.

 

Do I have to write custom code and detect scroll up - scroll down?

 

 

 

 

 

Developer
abarber
Posts: 189
Registered: ‎08-13-2008
My Device: Not Specified

Re: Background image on link:hover

Hello

 

With regards the scrolling issue.

 

I've used bookmarks in the past to move the screen down when a hyperlink is clicked.

 

Cheers

 

Andrew

Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Background image on link:hover

 


fenimor wrote:

 

Another problem I've encountered - when I have a long html text without any focusable elements (e.g. pure text) - then in focus based navigation page scrolling does not work.

 

Do I have to write custom code and detect scroll up - scroll down?

 

 


 

It should be scrolling down fine even if there are no focusable elements.  I've seen this working... I'm wondering if there is something special in the content.  is your long html text in a scrollable div?

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Contributor
fenimor
Posts: 11
Registered: ‎03-18-2010
My Device: bold 9700

Re: Background image on link:hover

> is your long html text in a scrollable div?

 

no, it's just a regular div. actually it something like this

<ul>

<li>

<div>

 <p>long text 1 <p> long text 2 <p> ...

</div>

</li>

</ul>

 

in focus based navigation it simply does not scroll donw.

 

Regular Visitor
fish_liver_oil
Posts: 1
Registered: ‎01-26-2011
My Device: Bold 9700

Re: Background image on link:hover

yeah CSS:hover doesn't work so all you need to do is change your hover element from something like:

 

html:

<div class="button">....</div>

 

css:

.button

{
}

.button:hover

{
}

 

to something like:

 

html:

<div class="button" onmouseover="this.className = 'button buttonhover';" onmouseout="this.className = 'button';"/>...</div>

 

css:

button

{
}

buttonhover

{
}

 

css blocks dun have to change

will work like a charm.

 

thanks