Change the style of a DIV when it is pressed

Question

Change the style of a DIV when it is pressed

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I have a problem with a hybrid mobile application.

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 I apply in my document css:

#foo:active{
    background-color: red;
}

However, in my mobile application, when I give quick touches ( quick clicks ) the style does not apply (only applies in long clicks).

What can I do to make the style change by giving quick clicks?

PS:

I have also tried to use a "click" event with javascript, adding and removing a class with different style, however, it only works in the aggregate of the class and when it is removed nothing happens.

css:

.bar{
    background-color: red;
}

js:

$$('#foo').click(function(){
    $$(this).addClass('bar');
    setTimeout(function(){ 
        $$(this).removeClass('bar');
    }, 100);


});

Note: $$ refers to the DOM management library that includes Framework7, which I am using

javascript html css cordova framework7

asked by Roberto Robles Rodriguez 20.04.2017 в 22:39

source

2 answers

2

Note that the click event does not respond the same on touch screens and this is mainly because there is a delay when the event is triggered on these types of screens. 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, tactile events such as:

touchstart
touchend
touchmove

These events are specially designed for mobile / touch devices, so there is no delay when these events are triggered.

To correct your problem you must use these events:

let eventName = 'click';

// usar alguna librería o una expresión regular
// para detectar si se está en dispositivo móvil
if (isMobile.any) {
  eventName = 'touchstart';
}

$('#foo').on(eventName, function() {
  $(this).addClass('bar');
  setTimeout(function(){ 
    $(this).removeClass('bar');
  }.bind(this), 100);
});

answered by 20.04.2017 в 23:37

How to display a message with Toast within a Thread in Android Studio? Data step of a multi-select in the selected order

score 3 · Accepted Answer

How about if you believe also that class style by clicking, otherwise you have no style or have a default style.

CSS:

.bar{
    background-color: red;
}
.no-bg{
    background-color: transparent;
}

JS:

$$('#foo').click(function(){
    $$(this).removeClass('no-bg');
    $$(this).addClass('bar');
    setTimeout(function(){ 
        $$(this).removeClass('bar');
        $$(this).addClass('no-bg');
    }, 100);
});

Something like that maybe.

EDITING

The problem is the reference $ (this) they do within the setTimeout, should use the selector or create a variable reference element, something like:

$$('#foo').click(function(){
    $$(this).removeClass('no-bg');
    $$(this).addClass('bar');
    setTimeout(function(){ 
        $$('#foo').removeClass('bar');
        $$('#foo').addClass('no-bg');
    }, 100);
});

Or so:

    $$('#foo').click(function(){
        var foo = $$(this);
        foo.removeClass('no-bg');
        foo.addClass('bar');
        setTimeout(function(){ 
            foo.removeClass('bar');
            foo.addClass('no-bg');
        }, 100);
    });

Although in that case, I think you do not need to have another class, it should work as you had the code before:

$$('#foo').click(function(){
    var foo = $$(this);
    foo.addClass('bar');
    setTimeout(function(){ 
        foo.removeClass('bar');
    }, 100);
});