Creating touch controls

Specifying text box size

Specify text box size in a CSS file.

.input_container input {
	width: 100%;
	height: 45px;
	...

}

Creating touch buttons

Create clickable HTML elements and make them big enough to select with a finger. Add a JavaScript onClick handler to the buttons to make them clickable.

For example, the following code creates two arrow buttons that users can press to change views.

<div id="navigationLeft" class="navigationBar">
  <img id="arrowLeft" src="gfx/arrow_left.png" alt="Previous day" onclick="navigationArrowClicked('left');" />
</div>

<div id="navigationRight" class="navigationBar">
  <img id="arrowRight" src="gfx/arrow_right.png" alt="Next day" onclick="navigationArrowClicked('right');" />
</div>

Figure: Arrow buttons

You can also create custom controls. For more information, see Customizing screen controls.