Prevent jumping to top when tapping next/prev buttons

[valstu]

Flexslider 2.0 Beta has a problem when clicking or tapping next and prev buttons (I used iPhone 4 with iOS 5.1.1). Page jumps to the top sometimes when you click those buttons. This won't happen with actual click even on a computer but when using touch device this problem occurs.

If you want to reproduce this problem go to the example site with your iPhone, scroll down a bit so you can detect possible jumping and start tapping.

[valstu]

I actually noticed now that this same issue is on the current version 1.8. I also noticed that if you tap on the center of the next/prev button it works as expected but if tap the edge of the button it highlights itself and the this unexpected jumping occurs. Haven't found any fix to this so far.

[tylernotfound]

I've noticed this same behavior and have yet to find a solution. I tried one obscure idea with no success. Open to hearing from others on this one.

[michaeloeser]

Same for me on my dev site at http://dev.der-prinz.com/agency

I'm using a slider on top and a carousel a little down the page. First I didn't realize that in the top slider but it also happens there. It's even more obvious in the carousel. It happens on iPad and iPhone.

As a workaround I tried to remove the prev/next buttons on smaller screens (with mediaqueries) which of course works ( did it only for < 340px at the moment for testing) but that is not a real solution.

[jonnott]

+1 here .. this always happens for me (eventually, after a certain number of .flex-prev or .flex-next taps) on iOS 5.1 MobileSafari, including on this demo http://flex.madebymufffin.com/examples/thumbnail-controlnav.html

[jtwalters]

I tried to narrow down the cause of this issue, and it's probably because both the click and touchstart events are firing when you touch the previous/next arrows, under certain conditions—possibly the duration of the touch.

In order to resolve this issue, the click default event needs to be prevented (i.e. disable the stub # anchor from being followed).

[jonnott]

@jtwalters Doesn't that already happen? Search for 'preventDefault' in the source..

[jtwalters]

@jonnott you have to preventDefault on the click event, not just the touchstart event. Based on the source code, I believe mobile browsers will only preventDefault on the touchstart event. The solution may require preventDefault on both the touchstart and click events.

[jonnott]

Any thoughts regarding preventDefault on both events @mbmufffin ?

[tylernotfound]

Interesting. I've been testing @jtwalters suggestion and it seems to be working.

[tylernotfound]

Alright, the update was just pushed to the FlexSlider 2 branch.

Thanks for the solution @jtwalters!

[jonnott]

Great. Has something gone weird with the git branches? There appear to be 2x branches on here now for fs2..

[tylernotfound]

Looks like I didn't use camel casing or something. flexslider2 has the latest commit; I'll clean it up later today.

[imjoeybrennan]

So I'm wondering how I can allow the jump to the top. My navigation is at the bottom of a e-mag and each slide is a page. If they turn the page using the directionNav I'd like it if they could be jumped back to the top.

I would greatly appricate knowing how to allow this to happen.

Thanks, Joey

[jtwalters]

Hi Joey,

You can accomplish this by providing a before callback to the flexslider options list. This fires a function immediately after the slides are changed.

(not tested)

before: function() { $("html, body").animate({ scrollTop: 0 }, 400); // scrolls the window to the top with 400ms animation }

[imjoeybrennan]

Thank you for this code. So far so good ;) I'll let you know if I run into any issues with this solution.

:D Thanks again! Joey

Edit: BTW thanks for making it animate. Looks real fresh.