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.

Web template toggle improvement

From Wiki
Jump to: navigation, search

Article Metadata
Tested with
Devices(s): N97
Keywords: Browsing, Mobile Web Templates
Created: aleksi.hanninen (17 Dec 2009)
Last edited: hamishwillee (24 Jun 2011)


This code snippet demonstrates how to improve the toggle component of Nokia High-End Mobile Web Templates. This is done by adding a javascript call back for the toggle to make the check property of the checkbox to be updated. Two toggle components in a list look like this:
Mobile web template toggle button.png
You can download the component library from Nokia Developer.

Source: Relevant HTML components

<html xmlns="" xml:lang="en">
<title>Toggle Improvement</title>
<!-- The reset and baseStyles style files of the templates -->
<link href="resources/styles/reset.css" rel="stylesheet" type="text/css" />
<link href="resources/styles/baseStyles.css" rel="stylesheet" type="text/css" />
<!-- The script of the templates -->
<script type="text/javascript" src="resources/scripts/templates.js" ></script>
<!-- The added script, shown in the next box -->
<script type="text/javascript">
// <![CDATA[
// [javascript]
// ]]>
<body onload="init()" >
<div id="wrap">
<div id="header">
<div id="content">
<!-- Each item must be in a separate list. -->
<ul class="list-toggle stack toggle">
<input id="toggle1" type="checkbox" name="toggle1" />
<a href="javascript:void(0)"
Click to get the toggle1.checked value</a>
<a href="javascript:void(0)"
Click to get the toggle2.checked value</a>
</div> <!-- content -->

Source: JavaScript

function init() {
* After this, the original #toggle1 checkbox element is replaced with a clone
* and not available anymore. The document.getElementById('toggle1') will
* return the clone of the checkbox!
* To use the "#toggle1.checked" value, we check it here afterwards
* in the given callback function (it is not updated elsewhere).
* Note that as the toggle is implemented with two links, pressing the link
* can change the URL hash (the part of the URL after the # mark). If the
* function ol.onclick in the ToggleSwitch of templates.js would return
* false, this would be avoided.

var myToggle1 = new ToggleSwitch("toggle1",function(thisElement) {
var toggleValue;
if (thisElement.lastChild.getAttribute('checked')) {
toggleValue = true;
else {
thisElement.lastChild.checked = false;
toggleValue = false;
// Update the checked value of the checkbox
thisElement.lastChild.checked = toggleValue;
doSomething(toggleValue); // do something, if needed

To find out whether the checkbox has been checked, use the checked property of the #toggle1 element which was cloned:

if (document.getElementById('toggle1').checked) {
// checked, do something
else {
// not checked, do something else

Or then the current state of the check box can be viewed from the existence of the 'checked' attribute:

if (document.getElementById('toggle1').getAttribute('checked')) {
// checked, do something
else {
// not checked, do something else


A ToggleSwitch is added on the web page, and the checked value of the checkbox is updated always when the ToggleSwitch is toggled.

By clicking the links "Click to get the toggle1.checked value" and "Click to get the toggle2.checked value" you can get the current value of the checked value of #toggle1 and #toggle2, respectively.

See also

Supplementary material

This code snippet is part of a web page stub, which can be downloaded at File:Web templates toggle improvement stub

This page was last modified on 24 June 2011, at 09:17.
78 page views in the last 30 days.