The source code for this sample can be found here: https://github.com/gomobile/sample-responsivebutton or download the Intel(R) XDK to check out all the HTML5 Samples.

Purpose

The purpose of the responsive button sample is to provide newer developers with a template for how to create a UI control that reads the touchStart and touchEnd JavaScript events in order to provide a responsive visual cue to the user that the button is being pressed.

This sample uses the intelxdk.js hybrid app JavaScript bridge library, but it is largely unused. The event listeners for the buttons are located in js/main.js.

Source Code

There is extensive CSS code in this application that enables it to look appropriate for both tablet and smartphone form factors. This line below is located in css/main.css and triggers the styling that is appropriate for a tablet device if the width of the screen is at least 768 pixels.

The code that sets up the event listeners for the two buttons is located in js/main.js. It is called soon after the page is loaded.

Finally, the event handlers are able to update the CSS of the selected button on the fly based on the object passed with the event.

Testing

This sample application has been tested on a variety of iOS and Android devices. Since it relies on some HTML5 specific CSS it may not function appropriately on older desktop browsers.