<div class="document">
<p>When using CarouFredSel on iOS, I noticed that transitioning by touch had somehow stopped working.</p>
<p>I'm using CarouFredSel, but when displaying a page on iOS, link transitions via tap stopped working.
(The carousel is set to rotate by swiping)</p>
<p>Therefore, when tapping each element:</p>
<ol class="arabic simple">
<li>Obtain and record the coordinates of the touch location with the touchstart event</li>
<li>Obtain and record the coordinates of the touch location with the touchend event</li>
<li>Calculate the distance between both coordinates</li>
<li>If it’s 10px or less (?), transition with JS</li>
</ol>
<p>I was thinking of making modifications like this.</p>
<pre class="literal-block">var clickX = null;
var clickY = null;
$('a.touch-link-direct, .touch-link-direct a').each(function () {
var element = $(this);
if (element.attr('href')) {
element.on("touchstart", function (event) {
clickX = event.pageX;
clickY = event.pageY;
});
</pre>
<p>Something like this.</p>
<p>However, when running this code on the iOS simulator, event.pageX becomes undefined. The same goes for clientX.
I wonder if it becomes a different property name when touched?</p>
<p>I didn't quite understand it, so I decided to make it transition based on the time difference between touchstart and touchend.</p>
<pre class="literal-block">var touchStartTime = null;
$('a.touch-link-direct, .touch-link-direct a').each(function () {
var element = $(this);
if (element.attr('href')) {
element.on("touchstart", function (event) {
touchStartTime = new Date().getTime();
});
element.on("touchend", function () {
if (!touchStartTime) {
return;
}
var touchEndTime = new Date().getTime();
var touchElapsedTime = touchEndTime - touchStartTime;
touchStartTime = null;
if (10 < touchElapsedTime && touchElapsedTime < 200)
location.href = element.attr('href');
return false;
});
}
});
</pre>
<p>For iOS, FilpSnap.js seems better than CarouFredSel.</p>
</div>
Comments