Skip to content
This repository has been archived by the owner on Aug 10, 2022. It is now read-only.

Commit

Permalink
Fixed up the samples and added information on iOS and hover specific …
Browse files Browse the repository at this point in the history 
…issues
  • Loading branch information
Matt Gaunt committed May 20, 2014
1 parent 016c59d commit 931ad9e
Show file tree
Hide file tree
Showing 7 changed files with 93 additions and 47 deletions.
22 changes: 0 additions & 22 deletions src/site/documentation/user-input/touch-input/_code/btn-demo.html
View file

This file was deleted.

10 changes: 9 additions & 1 deletion src/site/documentation/user-input/touch-input/_code/states-example.html
View file
Expand Up @@ -8,7 +8,7 @@
<meta name="msapplication-tap-highlight" content="no">
<!-- // [END ms-specific] -->

<title>Web Essential: States Example</title>
<title>States Example</title>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>

Expand Down Expand Up @@ -104,6 +104,14 @@

<button class="btn focus" tabindex="4">Button 4</button>

<script>
window.onload = function() {
if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
document.body.addEventListener('touchstart', function() {}, false);
}
};
</script>

<!-- // [TEMPLATE footer] -->
</body>
</html>
6 changes: 6 additions & 0 deletions src/site/documentation/user-input/touch-input/_code/touch-demo-1.html
View file
Expand Up @@ -381,6 +381,12 @@
for(var i = 0; i < swipeRevealItemElements.length; i++) {
swipeRevealItems.push(new SwipeRevealItem(swipeRevealItemElements[i]));
}

window.onload = function() {
if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
document.body.addEventListener('touchstart', function() {}, false);
}
};
};

window.onresize = function () {
Expand Down
6 changes: 6 additions & 0 deletions src/site/documentation/user-input/touch-input/_code/touch-demo-2.html
View file
Expand Up @@ -251,6 +251,12 @@
for(var i = 0; i < sliderElements.length; i++) {
new Slider(sliderElements[i]);
}

window.onload = function() {
if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
document.body.addEventListener('touchstart', function() {}, false);
}
};
};
</script>

Expand Down
26 changes: 17 additions & 9 deletions src/site/documentation/user-input/touch-input/_code/user-select-example.html
View file
Expand Up @@ -7,7 +7,7 @@
<!-- IE Specific to remove tap highlight -->
<meta name="msapplication-tap-highlight" content="no">

<title>Web Essential: States Example</title>
<title>user-select Example</title>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>

Expand Down Expand Up @@ -42,7 +42,7 @@
text-decoration: none;
}

.btn {
button {
background-color: #c0392b;

/* // [START user-select] */
Expand All @@ -59,37 +59,45 @@
background-image: none;
}

.btn.user-selectable {
button.user-selectable {
-moz-user-select: auto;
-webkit-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}

.btn:hover {
button:hover {
background-color: #B32C1E;
}

.btn:focus {
button:focus {
background-color: #8D0600;
/* The outline parameter surpresses the border color / outline when focused */
outline: 0;
}

.btn:active {
button:active {
background-color: #9A1305;
}

/* Firefox Specific CSS to remove focus ring */
.btn::-moz-focus-inner {
button::-moz-focus-inner {
border: 0;
}
</style>
</head>

<body>
<a class="btn" tabindex="1" href="#">None Selectable Text</a>
<button class="btn" tabindex="1">None Selectable Text</button>

<a class="btn user-selectable" tabindex="2" href="tel:+44 (0) 123456789">+44 (0) 123456789</a>
<button class="btn user-selectable" tabindex="2">+44 (0) 123456789</button>

<script>
window.onload = function() {
if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
document.body.addEventListener('touchstart', function() {}, false);
}
};
</script>
</body>
</html>
Binary file modified ...site/documentation/user-input/touch-input/activestates/images/button-states.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 55 additions & 15 deletions src/site/documentation/user-input/touch-input/activestates/index.markdown
View file
Expand Up @@ -55,11 +55,51 @@ See [Pseudo classes for touch states](#pseudo-classes-for-touch-states):

![Image illustrating the different colors for button states](images/button-states.png)

### Hover and Focus Stickiness

On most mobile browsers *hover* and/or *focus* states will apply
to an element after it's been tapped.

Consider carefully
what styles you set and how they will look to the user after
they finish their touch.

Bear in mind that anchor tags and buttons may have different behaviour in different browsers, so assume in some cases *hover* will remain and in others *focus* will remain.

### Enabling Active State Support on iOS

Unfortunately, Safari on iOS does not apply the *active* state by default, to get it working you need to add a `touchstart` event listener to the *document body* or to each element.

You should do this behind a user agent test so it's only run on iOS devices.

Adding a touch start to the body has the advantage of applying to all elements in the DOM, however this may have performance issues when scrolling the page.

{% highlight js %}
window.onload = function() {
if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
document.body.addEventListener('touchstart', function() {}, false);
}
};
{% endhighlight %}

The alternative is to add the touch start listeners to all the interactable elements in the page, alleviating some of the performance concerns.

{% highlight js %}
window.onload = function() {
if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
var elements = document.querySelectorAll('button');
var emptyFunction = function() {};
for(var i = 0; i < elements.length; i++) {
elements[i].addEventListener('touchstart', emptyFunction, false);
}
}
};
{% endhighlight %}

### Override Default Browser Styles for Touch States

Different browsers have implemented their own styles in response to user’s
touch. When you implement your own styles, you may want to override these
browser styles as well.
Once you add styles for the different states, you'll notice that most browsers implement their own styles to respond to a user’s
touch, you should override these defaults when you've added your own styles.

{% include modules/remember.liquid title="Remember" list=page.remember.override-default %}

Expand Down Expand Up @@ -98,7 +138,7 @@ Suppress the outline color when an element is focused using `outline: 0`.
.btn:focus {
outline: 0;

// Add replacement focus styling here
// Add replacement focus styling here (i.e. border)
}
{% endhighlight %}

Expand Down Expand Up @@ -132,7 +172,16 @@ user-select: none;
</thead>
<tbody>
<tr>
<td data-th="Class"><code>:focus</code></td>
<td data-th="Class">:hover</td>
<td data-th="Example"><img alt="Button in Pressed State" src="images/btn-hover-state.png"></td>
<td data-th="Description">
This state is entered when a is cursor placed over an element.
Changes in UI on hover are helpful to encourage users to interact
with elements.
</td>
</tr>
<tr>
<td data-th="Class">:focus</td>
<td data-th="Example">
<img alt="Button with Focus State" src="images/btn-focus-state.png">
</td>
Expand All @@ -144,7 +193,7 @@ user-select: none;
</td>
</tr>
<tr>
<td data-th="Class"><code>:active</code></td>
<td data-th="Class">:active</td>
<td data-th="Example">
<img alt="Button in Pressed State" src="images/btn-pressed-state.png">
</td>
Expand All @@ -153,15 +202,6 @@ user-select: none;
example a user clicking or touching an element.
</td>
</tr>
<tr>
<td data-th="Class"><code>:hover</code></td>
<td data-th="Example"><img alt="Button in Pressed State" src="images/btn-hover-state.png"></td>
<td data-th="Description">
This state is entered when a is cursor placed over an element.
Changes in UI on hover are helpful to encourage users to interact
with elements.
</td>
</tr>
</tbody>
</table>

Expand Down

0 comments on commit 931ad9e

Please sign in to comment.