Creating touch controls

When you design screen controls for touch-enabled devices, make them big enough to select with a finger.

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.