Javascript-форум - Как перейти по ссылке на следующую страницу методом SWYPE?

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как перейти по ссылке на следующую страницу методом SWYPE? (https://javascript.ru/forum/jquery/70906-kak-perejjti-po-ssylke-na-sleduyushhuyu-stranicu-metodom-swype.html)

Как перейти по ссылке на следующую страницу методом SWYPE?

Делаю сайт из двух страниц ориентированный на iPhone 6 и iPad. Главная страница состоит из ссылок (новости). Как с помощью свайпа перейти на другую страницу (просмотр новости)? А с просмотра новости вернуться на список новостей с помощью свайпа?

Еще объяснение:

свайпаешь и влево - след страница

вправо - предыдущая

Это как-то так, что ли? :)

var xhr=new XMLHttpRequest();
xhr.open('SWYPE','https://javascript.ru/',false);
xhr.send();

Swype - непрерывное движение касания по дисплею устройства?
Нужно повесить обработчики событий на события touchstart, tochend и touchmove (по желанию).
При touchStart записываете координаты начала движения, по touchEnd (или move) смотрите пройденный путь по вертикали и горизонтали.
Если пройденный путь по вертикали больше, чем по горизонтали, то игнорируем этот событие, т.к. это просто скролл страницы.
Если иначе, то выполняете то, что вам нужно.

Не сильно сложно.

Nexus, спасибо за ответ. У меня почти все получилось с помощью jquery mobile. Но появилась следующая проблема, прошу взглянуть на мой код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1" name=viewport>
  <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <title>test</title>
</head>
<body>
  <div class="wrapper">
    <section class="articles">
      <div class="section">
        <h2 class="title_section">Editorial:</h2>
        <article class="article">
          <div class="leopard_link">
            <h3 class="title_article">What's the Story?</h3>
            <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ipsa deserunt nisi eaque veniam explicabo laborum aliquam odit et velit possimus est quae error doloremque, ullam iusto voluptatem quis recusandae!</div>
          </div>
        </article>
      </div>
      <div class="section">
        <h2 class="title_section">Recommended Products:</h2>
        <article class="article">
          <div class="cheetah_link">
            <h3 class="title_article">Buy put options to hedge your equity exposure</h3>
            <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ipsa deserunt nisi eaque veniam explicabo laborum aliquam odit et velit possimus est quae error doloremque, ullam iusto voluptatem quis recusandae!</div>
          </div>
        </article>
      </div>
    </section>
  </div>

  <script>
    $(function() {
      var page_leopard = $('.leopard_link'),
          page_cheetah = $('.cheetah_link');

      page_leopard.on( "swipeleft", swipeleftHandler );
      function swipeleftHandler( event ){
        $(location).attr('href', 'http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/Leopard-tree.ngsversion.1477048906275.adapt.945.1.jpg');
      }

      page_cheetah.on( "swipeleft", swipeleftHandler );
      function swipeleftHandler( event ){
        $(location).attr('href', 'http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/A-G/cheetah-watching.ngsversion.1396530528126.adapt.945.1.jpg');
      }

    });
  </script>
</body>
</html>

На этой странице 2 разных ссылки, для примера я выбрал фото больших кошек: 1. Леопард; 2. Гепард. Почему когда происходит свайп по первой ссылке, переход происходит на вторую? Подскажите плизз, в чем моя ошибка?

AlexBes89,
Потому что невозможно иметь несколько функций с одинаковым именем, в таком случае последняя перезапишет все предыдущие, надо разделять имена, например swipeleftHandler1 и swipeleftHandler2.

Rise, спасибо большое=)