(Website link has been removed by the author)
The situation is there are two chevron anchors (<a>) on the page. (They were added into the DOM via javascript) One is "Previous" and another is "Next". By clicking on the "Next" anchor, the toNextSection() function will be triggered and the page will scroll to the next section, and vice versa.
That works on all desktop browsers, but is odd on iPad.
Originally, the two chevrons were bound with the "click" event. I then tried changing the code to the following in order to fix the iPad issue, but the issue remains. So I guess the problem is not the event type.
var clickEvent = navigator.platform.match(/iPad/i) ? 'touchstart' : 'click';
$('#sectionnav .prev a').on(clickEvent, function() { toPrevSection() });
$('#sectionnav .next a').on(clickEvent, function() { toNextSection() });
There are some information I have gathered so far about the iPad issue:
- The first time tapping the "Next" chevron, the page scrolls to the next section successfully. But after that, you can no longer tap either of the chevrons again. Tapping them a second time does nothing.
- I had tried replacing all contents of the
toPrevSection()function with a single line:alert('Test');, and then tapping the "Previous" chevron can always show alert box successfully. But as mentioned above, after tapping the "Next" chevron to scroll the page to the next section, tapping the "Previous" chevron can no longer show any alert box. - I had tried
setInterval('toNextSection()', 10000);orsetInterval(function() { $('#sectionnav .next a').trigger('touchstart') }, 10000);and the page can successfully scroll to the end autometically. - If you manually slide the page a bit forward before tapping the "Next" chevrons, then tapping the "Next" chevrons can no longer scroll the page.
NEW:
- I also tried binding the click event to other elements such as the logo or images in the footer. And the issue is the same. Tapping at the first time works and the second time does nothing.
- After tapping the "Next" chevron (or whatever is bound with the click event) and the page scrolls to the next section, all hyperlinks and form button on the page no longer work (tapping on them does nothing).
- When the page is set to auto scrolling (the
setIntervalmentioned above), tapping the "Next" chevrons before the page starts auto scrolling still works (and the auto scrolling works, too). But after the page starts auto scrolling, all hyperlinks and form button on the page no longer work (tapping on them does nothing).
Any advise would be greatly appreciated. Thanks!
