I have a problem with a hybrid mobile app.
I would like to change the style of a div when it is clicked. I currently have something like:
<div id="foo">
Lorem ipsum dolor...
</div>
and apply in my css document:
#foo:active{
background-color: red;
}
However, in my mobile app, when I do quick taps ( quick clicks ) the style doesn't apply (it only applies on long clicks).
What can I do to make the style change on quick clicks?
P.S:
I have also tried using a "click" event with javascript, adding and removing a class with a different style, however it only works on adding the class and when removing the class nothing happens.
CSS:
.bar{
background-color: red;
}
js:
$$('#foo').click(function(){
$$(this).addClass('bar');
setTimeout(function(){
$$(this).removeClass('bar');
}, 100);
});
Note: $$
he refers to the DOM management library that includes Framework7, which I am using
What do you think if you create, in addition to the style of that class when clicking, another one that does not have any style or that has a default style.
CSS:
JS:
Something like that maybe.
EDITION
The problem is in the reference of the $(this) that you do inside the setTimeout, you should use the selector or create a variable referring to the element, something like this:
Or this way:
Although in that case, I think you would not need to have another class, it should work as you had the code before:
Keep in mind that the click event does not respond in the same way on touch screens and this is mainly due to the fact that there is a delay when the event is fired on this type of screen. This delay is 300ms , that's why you need to keep at least 0.3 seconds for the click event to occur.
HTML5 brought, among all its specifications, touch events such as:
These events are specially designed for mobile/touch devices, so there is no delay when firing these events.
To correct your problem you should use these events: