I have a web page where i open a jquery calculator. This page works only with safari from desktop and with chrome from android devices beacause i use a embedded dataabse.
When someone navigates to that page with a table device the interaction with the calculator was very slow, so i used fastclick library and the problem is solved. With this library i had to manual add some jquery classes to the button elements such as ui-state-hover because of the stopPropagation() and preventDefault().
The calculator is fast and hover color works great excect at kindle fire. When i remove jquery classes or try to blur an button seems not to work. Also i tried to to ovveride a css rule for this buttons so that they do not focus when i click them. Nothing seems to work. I saw that this library does not support the silk browser of this device but it fixed the 300ms delay.
Is there a way to override kindle fire jquery events? The problem is with the silk browser?
my code is:
document.getElementById("inv_calc_button_" + id).addEventListener('touchend', function(event) {
event.stopPropagation();
event.preventDefault();
_function();
$("#inv_calc .inv_calc_button").removeClass("ui-state-hover");
$(this).addClass("ui-state-hover");
}, false);
if (!(/\bSilk\b/.test(navigator.userAgent))) {
document.getElementById("inv_calc_button_" + id).addEventListener('click', function(event) { _function(); }, false);
}
This is how i override the css of the button opens the calculator and works for all except kindle fire:
.item_table button.ui-state-hover, .item_table button.ui-state-focus, .item_table button.ui-state-highlight {
border: 1px solid #cccccc !important;
background: #f6f6f6 url(/webfile?name=css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x !important;
font-weight: bold !important;
color: #1c94c4 !important;
}