CODEWITHSUNDEEP
jqueryipadmobileresponsive-design
eCamK
eCamK

Reputation: 273

Hover and click event on mobile devices

I am creating a responsive website for both desktop and mobile. I have one issue with a hover and click event that I am not sure how to solve for users on mobile devices.

On the site, I have a box (div) that is wrapped in a link. On the desktop, when a user hovers over it, a different colored box with text content slides down over the first box. When a user clicks the box, the link takes them to specified page. I am using jQuery for this.

Right now, on a mobile device, when a user taps the box, second box slides down. But it takes a second tap to actually follow the link. The company that I am creating this for has requested that, on mobile devices, that when the user taps a box, the second box will slide down and after a 2 second delay, it will automatically send them to a specified page. This way, a user is only required to tap once.

I'm not sure how to make this work. I thought about using jQuery mobile, but I can't figure out a way to bypass the first tap (which mobile devices treat like a hover event) and activate the link instead.

Thanks

Upvotes: 13

Views: 47947

Answers (3)

dotfury
dotfury

Reputation: 322

Try using jQuery to listen to the touchstart and touchend events for mobile.

EX:

$('selector').bind('touchstart', function(){
  //some action
});
$('selector').bind('touchend', function(){
  //set timeout and action
});

Hope this helps.

Upvotes: 1

sabithpocker
sabithpocker

Reputation: 15566

I agree with @DZittersteyn on the fact that this is a bad design. You can better show the content by default in mobile so that the one who clicks knows what he clicked.

if(!!('ontouchstart' in window)){//check for touch device
  $('myElement').unbind('click mouseenter mouseleave'); //use off if you used on, to unbind usual listeners
  $('myElement').on('click',function(){
    //slide down code
    setTimeout(function(){
       window.location.href='asdasd.html';
       },2000);
    });
}

or you can use

if(!!('ontouchstart' in window)){//check for touch device
//behaviour and events for touch device
}
else{
//behaviour and events for pointing device like mouse
}

Upvotes: 16

Artem Doink
Artem Doink

Reputation: 21

if (('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch))) {
    $(".touch")
        .bind("touchstart", function() {
            $(this)
                .addClass("active")
                .bind("touchend", function() {
                    $(this).removeClass("active");
                });
        })
        .bind("touchenter", function() {
            $(this)
                .addClass("hover")
                .bind("touchleave", function() {
                    $(this).removeClass("hover active");
                });
        });
}

Upvotes: 2

Related Questions