Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

Interactive buttons with onfocus event

From Wiki
Jump to: navigation, search

This article explains how to highlight buttons when they are pressed using the onfocus and onblur events.

Article Metadata
Tested with
SDK: Web Developer Toolkit 3.0 Beta
Devices(s): Nokia Asha 311, Nokia Asha 303
Compatibility
Platform(s): Series40 Touch&Type, Series40 FullTouch
Series 40
Series 40 DP 2.0
Series 40 DP 1.1
Article
Created: internetlabor (31 May 2013)
Last edited: hamishwillee (11 Jun 2013)

Contents

Overview

We want instant feedback when the user presses a button as this makes our web app feels more responsive.

In normal web pages, we can use css-pseudo-classes ":hover" or ":active". But the css-pseudo-classes do not work in the current web app browser (and in any case "hover" is meaningless on a touch screen).

Solution

We let the button-element handle the focus and blur events.

Asha-webapps-button-onfocus-onblur.png

Because we want instant feedback without a server roundtrip, we can use only the mwl-functions.

We can use the mwl.switchclass() function to give the button a different css class. In the css class we can define a different background-color or a different backgroud-image.

<button id ="btnN" class="ui-button unpressed" name="buttonN" 
onfocus="mwl.switchClass('#btnN', 'unpressed', 'pressed');"
onblur="mwl.switchClass('#btnN', 'pressed', 'unpressed');"
onclick="doMyAction();">A Button-Element #btn2</button>

In the css file we need to define pressed and not-pressed style in addition to the normal button style:

.unpressed {
background-image: url(../images/button_background.png);
background-repeat: repeat;
background-position: left top;
}
.pressed {
background-image: url(../images/buttonpr_background.png);
background-repeat: repeat;
background-position: left top;
}
.ui-button {
height: 35px;
padding-right: 8px;
padding-left: 8px;
color: #FFF;
text-decoration: none;
margin: 5px;
}

Caveats

This approach works differently in emulators and on devices.

On a device (Full Touch and Touch & Type), it works well with the html tags button, a, img and div. In the simulator however, it seem to work only with button and a tags. Other html tags like the div tag do not trigger the onfocus event handler in the Emulators.

tag Full Touch Device Touch Type Device Cloud Preview Local Simulator
button works works works* works*
a works works works* works*
img works works no event no event
div works works no event no event

(*) The blur event is triggered at different times in the emulator and on the device. On the device, onblur is triggered when the user releases the finger. On the emulator, onblur is triggered only after the user has clicked another element.

References

Nokia Asha Web App Developer's Library: Events

Nokia Asha Web App Developer's Library: HTML-tags and theirs attributes

This page was last modified on 11 June 2013, at 04:02.
224 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×