CODEWITHSUNDEEP
javascriptjqueryhtmlcssmobile
choz
choz

Reputation: 17868

Detecting hover or mouseover on smartphone browser

I have an alphabetical scrolling bar (ASB) in my app, which most smartphones have in their Contacts app.

Now, I have no problem to scroll to specific item when my finger touchstart touchend click etc.. on the ASB. But, I have problem on capturing hover or mouseover event on my smartphone.

I have tried touchstart touchswipe touchend mouseenter mousemove or hover with no lucks.

Here's the Fiddle or Codepen to play around on your mobile.

Any suggestion is appreciated.

Upvotes: 21

Views: 43767

Answers (4)

choz
choz

Reputation: 17868

TL;DR; touchmove, touchstart and touchend are the events that made this possible.

I've found that people keep telling me that it's not possible on non-native app to provide the functionality of hover event on smartphone.

But, the modern smartphone browsers have actually provided the functionalities. I realized that the solution is literally lying in a very simple place. And with few tweaks, I've figured how I can simulate this behavior to cross-platform even though it's a bit cheating.

So, Most oftouchevents are passing the arguments that have the needed information where the user touches on the screen.

E.g

var touch = event.originalEvent.changedTouches[0];
var clientY = touch.clientY;
var screenY = touch.screenY;

And since I know the height of every button on my ASB, I can just calculate where the user hovers the element on.

Here's the CodePen to try it easier on mobile touch devices. (Please note this only works on touch devices, you can still use chrome on toggled device mode)

And this is my final code,

var $startElem, startY;

function updateInfo(char) {
  $('#info').html('Hover is now on "' + char + '"');
}

$(function() {
  var strArr = "#abcdefghijklmnopqrstuvwxyz".split('');
  for (var i = 0; i < strArr.length; i++) {
    var $btn = $('<a />').attr({
        'href': '#',
        'class': 'btn btn-xs'
      })
      .text(strArr[i].toUpperCase())
      .on('touchstart', function(ev) {
        $startElem = $(this);
        var touch = ev.originalEvent.changedTouches[0];
        startY = touch.clientY;
        updateInfo($(this).text());
      })
      .on('touchend', function(ev) {
        $startElem = null;
        startY = null;
      })
      .on('touchmove', function(ev) {
        var touch = ev.originalEvent.changedTouches[0];
        var clientY = touch.clientY;

        if ($startElem && startY) {
          var totalVerticalOffset = clientY - startY;
          var indexOffset = Math.floor(totalVerticalOffset / 22); // '22' is each button's height.

          if (indexOffset > 0) {
            $currentBtn = $startElem.nextAll().slice(indexOffset - 1, indexOffset);
            if ($currentBtn.text()) {
              updateInfo($currentBtn.text());
            }
          } else {
            $currentBtn = $startElem.prevAll().slice(indexOffset - 1, indexOffset);
            if ($currentBtn.text()) {
              updateInfo($currentBtn.text());
            }
          }
        }
      });

    $('#asb').append($btn);
  }
});
#info {
  border: 1px solid #adadad;
  position: fixed;
  padding: 20px;
  top: 20px;
  right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
  No hover detected
</div>
<div id="asb" class="btn-group-vertical">
</div>

Upvotes: 14

rhavendc
rhavendc

Reputation: 1013

The code you provided in your Fiddle or Codepen is working fine. So what's the fuss?

Well, in mostly air or touch-triggering gadgets like smartphones and tablets, you cannot simply use the hover thing function because you can't hover thing on it to make some events. You can only use the hover function when you are using for example a detachable keyboard for tablet (or something that uses mouse or finger scroller).

Upvotes: 0

smarttechy
smarttechy

Reputation: 902

bind touchstart on a parent. Something like this will work:

$('body').bind('touchstart', function() {});

You don't need to do anything in the function, leave it empty. This will be enough to get hovers on touch, so a touch behaves more like :hover and less like :active.

Similar question How do I simulate a hover with a touch in touch enabled browsers?

Upvotes: 0

Leo Napoleon
Leo Napoleon

Reputation: 989

The hover event is triggered with click/touch events on mobile phone, because you can not simply hover an element on a touch screen.

You can demonstrate this behaviour by simply using the css hover and/or focus selectors to modify content, you can see, that before clicking elements remain the same, but after clicking they retain modified styles.

Upvotes: 0

Related Questions