0

I've implemented a sidebar navigation with a hover effect to jump from slide to slide on a custom slider which is working fine using a simple jQuery hover() function:

$('#slider-nav ul li').hover(function() {
  $(this).prev().addClass('hover-sib');
  $(this).next().addClass('hover-sib');
}, function(e) {
  $(this).prev().removeClass('hover-sib');
  $(this).next().removeClass('hover-sib');
});

but on mobile it would need to be polished.

The idea is to have the same hover effect on real time while the user slides the finger vertically over the lines, making them grow to the side and the text to appear. Once the user releases on an option it could be interesting to call that slide, but that is not the priority right now. The bigger issue is how to achieve the similar effect of a hover when a user slide the finger through the element...

Any idea? I thought on using 'touchmove' but I don't think that I could tell if the user is over one of those options or even which one of them.

$('#slider-nav ul li').bind('touchmove',function(){
    $(this).prev().addClass('hover-sib');
    $(this).next().addClass('hover-sib');
});

Sample: https://jsfiddle.net/ac_coding/d7xnndg2/

UPDATE: In case it wasn't properly understood/explained, what I'm trying to achieve here is the same hover effect on a desktop when a mobile user touches the screen and, without lifting the finger, moves from along the vertical right edge, hovering and passing through different lines/options of the nav which would be triggering their "hover" effect. Using touchstart/touchend will require the user to tap at different points of the nav in order to see the options.

I hope it makes sense, doesn't seem easy to explain :S

UPDATE 2: It seems that I finally found a solution but I don't have the time now. I'll update this question tomorrow explaining it for everyone else. Thanks everybody for your help!

Alb-C
  • 137
  • 1
  • 10
  • The accepted answer to this question might help you: http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers – Velocibadgery Sep 21 '16 at 17:28
  • That's a possible solution I was also considering in case I couldn't make my idea works, but, like the suggestion below, it would require a two steps navigation which I'm trying to avoid if possible. I've edited my question in case I didn't explain the issue properly. – Alb-C Sep 22 '16 at 10:10

1 Answers1

1

Did you try to bind to the touch event? You need to add "hover-effect" class (where :hover styles are) as your additional CSS selector as well.

$('#slider-nav ul li').bind('touchstart', function() {
  $(this).addClass('hover-effect');
  $(this).prev().addClass('hover-sib');
  $(this).next().addClass('hover-sib');
});

$('#slider-nav ul li').bind('touchend', function() {
  $(this).removeClass('hover-effect');
  $(this).prev().removeClass('hover-sib');
  $(this).next().removeClass('hover-sib');
});
Момчил Джамбазов
  • 56
  • 3
  • For more details check out this article: http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/ – Момчил Джамбазов Sep 21 '16 at 17:40
  • Yep. That's kind of the solution I kept in mind in case I couldn't make my idea works, but it would require a two steps navigation which I'm trying to avoid if possible. I've edited my question in case I didn't explain the issue properly. – Alb-C Sep 22 '16 at 10:08