Skip to content

Interactive HTML elements / preventing swiping

By default, swiping over an HTML element will invoke a swipe navigation action. If you would rather the user interact with the HTML area you need to flag all, or part of the HTML as interactive.

You do this by adding the class .interactive to the area you want the user to interact with.

This element (and all its children) will no longer trigger a swipe navigation action, and will permit interaction as defined in the HTML5 package.

Incorrect

Swipe anywhere on this HTML package will trigger a swipe navigation, so the user cannot drag the UI sliders 

<div>
    <div class="bar-chart"></div>
    <div class="sliders"></div>
    <div class="key"></div>
</div>

Correct

The whole area now responds to user input so they can now drag the UI sliders. 

<div class="interactive">
    <div class="bar-chart"></div>
    <div class="sliders"></div>
    <div class="key"></div>
</div>

Tip

You can make specific areas of the HTML interactive, by adding the class to just those elements. 

<div>
    <div class="bar-chart"></div>
    <div class="interactive sliders"></div>
    <div class="key"></div>
</div>