Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 06:02, 20 August 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Component highlight fix with high-end templates

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleArticle
Created: symbianyucca (06 Oct 2010)
Last edited: hamishwillee (20 Aug 2013)

The Nokia Mobile Web Templates can be found from Web_templates. This article is concentrating on the high-end one, and particularly a small problem causing the highlight of a control to stay on after it was clicked.

The problem cause lies on the fact that the CSS for the template controls is using the highlight on hovering state. The hover state is started when a dom-object gets mouse-over event, and cleared when it gets mouse-out event.

With some devices mouse-out event comes only after user clicks on some other place in the web page, which means that the highlight set on for the hovering state is not cleared correctly.

This article shows only one workaround for fixing the issue, and the workaround is only tested with Nokia 5800 & N8 devices.

The fix is based on a timer solution when a class named hovering is first added into the node, and then removed once the timer expires. The code looks like this:

function Dohighlight(which){
which.timeout = 0;
which.className += " "+"hovering";
var that = which;
which.timeout = setTimeout(function(){
var reg = new RegExp('(\\s|^)'+ "hovering" +'(\\s|$)');
that.className = that.className.replace(reg,' ');

And to use it for any specific node you need to add an event handler (for example for mouse-down event) that calls the function and gives the node to it.

For example flat button the HTML code could look like this

<a class="button-flat" onMouseDown="JavaScript:Dohighlight(this);" href="#">Click Here</a>

And to get the CSS highlight working then, all hover selectors would need to be changed to be using the hovering class instead.

The full code example for different controls can be found here:

This page was last modified on 20 August 2013, at 06:02.
50 page views in the last 30 days.