How to trigger active state on mobile tap targets

Mobile
1

Active state click works on desktop using the following CSS:

a.btn.btn-primary:focus {
  background: green;

But tapping the buttons on IOS does not trigger the tap highlight colour. Any idea how to solve this?
https://temp.impactwroughtiron.com.au/
Any help appreciated.

PS This post relates to the same issue found in this post: Adding active tap state to mobile

2

Usually mobile devices will treat :hover as a first tap (on elements like anchors and buttons) so mobile should pick up hover styles but not :focus.

You would probably need to use js to add a class for touch devices if it’s critical.

3

Unfortunately, swapping focus for hover doesn’t work on my iPhone ,but does on the desktop.
I copied the JavaScript from the link you supplied and dropped it into my footer.php but no luck there either.
Check the green button on this site on your mobile - this is what I’m looking for, but with simple hover colour, no drop shadow.
I don’t know why my iPhone is not picking up hover. Could it be a cache issue? Any idea how to empty cache on iPhone?

900Ă—540 47.7 KB

4

Yes that’s how :hover works by default. There is nothing extra going on there.

It seems you have some sort of script or function that interferes with that behaviour. Try removing the skip-link.js file you have in the page and test to see if that’s the culprit. If no change then put it back in place.

You can also try adding an empty onclick handler to the button links as that is another fix which is usually used for non focusable elements.

e.g.

<a onclick="" class="btn" href="... etc

Yes it was not a straight copy and paste as you would need to set it all up correctly and apply the css that goes with it. The code was specific to my example but could be changed to suit your example by changing it to apply to the correct elements in your page.

e.g: here’s a working example with your phone links added.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.touch .phone-buttons .btn.over {
	background:green;
	cursor:pointer;
}
</style>
</head>

<body>
<p class="phone-buttons"><a class="btn btn-primary btn-lg btn-block lg-text" href="https://temp.impactwroughtiron.com.au/wrought-iron-balustrades/">Balustrades</a></p>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
// detect touch 
	if (!("ontouchstart" in document.documentElement)) {
  	document.documentElement.className += " touch";
	}
$('.phone-buttons .btn').on('touchstart touchend', function(e) {
    $(this).toggleClass('over');         
});
</script>
</body>
</html>

The above script should work without the previous fixes but does depend on whatever scripts you have running that might interfere.

5

Paul, I really appreciate your insight here. Having your code work on the site is reassuring, but I just can’t get the homepage to work. Something is interfering with the script as you say but I don’t know what it is or where to start looking.
I commented out all the script enqueues in functions.php and it made no difference to the site at all, so that’s not particularly encouraging… but, upward and onward! :slight_smile:
Thanks for your help

6

If you look ion the console it is showing $ as undefined so try the code like this instead.


jQuery(function($) {
    // detect touch 
    if (!("ontouchstart" in document.documentElement)) {
        document.documentElement.className += " touch";
    }
    jQuery('.phone-buttons .btn').on('touchstart touchend', function(e) {
        jQuery(this).toggleClass('over');
    });

});
1 Like
7

I bow to thee :grinning:
Many thanks Paul - working now :+1:

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.