Как создать touch навигацию по сайту для сенсорных устройств?

Question

[Анна Бакурова]

На сайте test.cuberto.ru/libris/index.html# необходимо осуществить touch навигацию (сейчас только скролл работает и табы) навигация должна быть примерно такая:

Если прокручено более $(window).height()/2 то мы прокручиваем до след. блока, если нет, то возвращаемся обратно. Обязательное условие, чтобы только было на touch и mousemove никак не задевало, так как на не сенсорах такого быть не должно.

Уже видела много сайтов, но там тач с mouse. Если кто видел статейки, как сделать такой функционал или сайты такие видел, то кидайте, может, у кого есть код уже готовый без чего-либо лишнего, то ещё лучше. Первый раз столкнулась с таким, так что разобраться сложно. Можете присылать на почту [e-mail]
Пример test.cuberto.ru/cub2014/index_r.php#work (просмотреть то, о чем Я говорила, можно только на ipad)

Answer 1

[iDevArtem]

Как вариант, дописать вначале:

var isTouch = ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) ? true : false,
    pushstart = isTouch ? "touchstart" : "mousedown",
    pushend = isTouch ? "touchend" : "mouseup";

и вместо:
$(".content").click(function(e){ ... }

вот это:
$(".content").bind(pushend, function(e){ ... }

Comments

[Анна Бакурова]

это к тому примеру дописать? Мне если так то нужен код который отдаёт расстояние которые человек провёл по экрану (то есть от touchstart до touchend). И в зависимости от того куда человек ведёт палец(touchmove) изменять параметр top у .slider. Я не сильна в тач и mouse....

[iDevArtem]

Походу как то так:

var isTouch = ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) ? true : false,
    pushstart = isTouch ? "touchstart" : "mousedown",
    pushend = isTouch ? "touchend" : "mouseup",
    pageY;
$(".content")
    .bind(pushstart, function(e) {
        pageY = e.pageY;
    }).bind(pushend, function(e) {
        if (e.pageY > pageY) {
            // slide down
        } else {
            // slide up
        }
    });

[Анна Бакурова]

Класс! Оно работает! Благодарю! Единственное что нет обработчика на "touchmove". Но его Я сейчас попробую сама сделать, кажется поняла какая логика) Оказалось всё так легко... А Я уже третий день голову ломаю. Если знаешь хорошую статью про это то кидай, почитаю)

[iDevArtem]

var isTouch = ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) ? true : false,
   pushstart = isTouch ? "touchstart" : "mousedown",
   pushend = isTouch ? "touchend" : "mouseup",
   pushmove = isTouch ? "touchmove" : "mousemove",
   pushenter = isTouch ? "touchenter" : "mouseenter",
   pushleave = isTouch ? "touchleave" : "mouseleave";

А вообще есть уже готовое решение:
FullPage.js
OnePage Scroll

[Анна Бакурова]

готовые мне меньше были нужны так как мне логику понять нужно было на лёгком примере, но всё равно спасибо что кинул.)

[Анна Бакурова]

Прописала у себя, на компах работает (mousemove) а вот на тач устройствах touchmove работает как обычно (просто пролистывается). Как будто он и не знает этот touchmove.
var isTouch = ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) ? true : false,
pushstart = isTouch ? "touchstart" : "mousedown",
pushend = isTouch ? "touchend" : "mouseup",
pushmove = isTouch ? "touchmove" : "mousemove",
pageY;
$(".slider")
.bind(pushstart, function(e) {
pageY = e.pageY;
$(this).bind(pushmove, function(e) {
lineY = e.pageY;
vector = parseInt( $(this).css('top') ) - (pageY-lineY)/120
$(this).css({
top: vector
});
})
})
.bind(pushend, function(e) {
$(this).unbind(pushmove);
if ( (e.pageY - pageY) > $(window).height()/2 ) {
sliderTop();
}
if ( (e.pageY - pageY) < (-$(window).height()/2) ) {
sliderBottom();
}
else{
$(this).css({
top: $('.item-slider.active').position().top
})
}
});

[iDevArtem]

не могу понять причем тут вообще touchmove

[Анна Бакурова]

он для того чтобы при событии tochmove блок перемешался туда куда пользователь поведёт.

[iDevArtem]

Ну скажем, тут два варианта решения (которые вы пытаетесь соединить непонятно зачем и непонятным образом):

1. Это который я вначале написал:
- при touchstart сохраняем pageY
- при touchend сравниваем текущий e.pageY с сохнаненным
- если текущий больше сохраненного, то двигаем вниз, иначе вверх

2. Это - touchmove:

var pageY;
$('.content').bind('touchmove', function (e) {
    var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY;
    if (currentY > pageY) {
        // down
    } else {
        // up
    }
    pageY = currentY;
});