×
Namespaces

Variants
Actions
Revision as of 09:05, 7 May 2012 by hamishwillee (Talk | contribs)

Component highlight fix with high-end templates

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleArticle
Created: symbianyucca (06 Oct 2010)
Last edited: hamishwillee (07 May 2012)

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){
if(which.timeout){
clearTimeout(which.timeout);
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,' ');
},500);
}

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: HighLightFix.zip

56 page views in the last 30 days.
×