Skip to content

Instantly share code, notes, and snippets.

@cemerson
Forked from cemerson/android.css
Created September 11, 2013 17:34
Show Gist options
  • Save cemerson/6527020 to your computer and use it in GitHub Desktop.
Save cemerson/6527020 to your computer and use it in GitHub Desktop.
/* http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html */
/* this */
.my-button:active {
background-color: blue;
}
/* becomes */
my-button:active, .my-button.fake-active {
background-color: blue;
}
/*
Now, in your document ready event, when running on Android only, attach event handlers for touchstart and touchend to all the classes that have used :active. Make these add and remove the fake-active class.
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
$(".my-button")
.bind("touchstart", function () {
$(this).addClass("fake-active");
})
.bind("touchend", function() {
$(this).removeClass("fake-active");
});
.bind("touchcancel", function() {
// sometimes Android fires a touchcancel event rather than a touchend. Handle this too.
$(this).removeClass("fake-active");
})
.bind("touchcancel",
function() {
var $this = $(this);
$this.removeClass("fake-active");
});
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment