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
New Contributor
Posts: 7
Registered: ‎08-20-2009
My Device: Not Specified
Accepted Solution

CSS pseudo classes are not working

I am trying to show the control feedback when user performed a click on anchor tags, buttons etc in the web page. For doing that i am using CSS pseudo class :active, but couldn't see the feedback shown on the controls. I tried with :hover, :visited but had no luck.

 

I thought these are in CSS 1.0 specification and blackberry browsers would support it, i think these classes are not supported on blackberry browsers or may be i am doing something wrong.

 

Ex: input.button:active {background: url(blueButton.png)}

 

I tried on Storm 9530 model, but couldn't make it working.

 

If anyone have worked on providing the control feedback, by showing the control is clicked when user performed a operation, could you help me how to achieve on the blackberry browsers.

 

 

New Contributor
Posts: 7
Registered: ‎08-20-2009
My Device: Not Specified

Re: CSS pseudo classes are not working

Anybody there? who can help me out in achieving showing controls like button, <a> etc in "Pressed State" when user performed a click on the control in blackberry browsers.

 

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

Re: CSS pseudo classes are not working

I don't believe the ":active" capability works with our browser.  We do have :hover support though

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 7
Registered: ‎08-20-2009
My Device: Not Specified

Re: CSS pseudo classes are not working

I tried using :hover but the issue is that as it is storm touch device, it is not showing the hovering when user is performing the action on the control. If you could show some reference, it would be great.

 

To show the control is selected, i am using :active pseudo classes. Is there any workaround anyother way you suggest when clicking on the <a> or button elements the selection is shown on the control to make user understand that control is clicked and awaiting for the response.

 

I would like to thank you in advance for your help.

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

Re: CSS pseudo classes are not working

What I typically do is change the image using JavaScript.  On the onclick() of the element I change it's style characteristics to make it look like it is selected.

 

You can also do the trick where you change the image/style of the button onclick() and then to run the rest of the code for the "click" action you run it using a setTimeout().  This is because the JavaScript thread needs to exit before it will re-paint the UI

 

An example below:

 

 

function doClick() {

  document.getElementByID("myImage").src='images/selectedBtn.png';
  setTimeout('doRestOfClick()', 200);

}

function doRestOfClick() {

  // Whatever logic I wish to perform

}

 

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Highlighted
New Contributor
Posts: 7
Registered: ‎08-20-2009
My Device: Not Specified

Re: CSS pseudo classes are not working

Thanks Neil for your help. I have used javascript and applying the styles based upon the user actions.

Do you have any idea why CSS pseudo classes are not supported on the mobile devices, can you think of any performance issues in providing on mobile browsers.

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

Re: CSS pseudo classes are not working

I believe the new webkit browser coming with BlackBerry 6 will support pseudo classes.  We are grabbing the weekly updates from the open source project.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter