CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobilecordova
block14
block14

Reputation: 619

Swipe between pages with real time responsive transition

I would like to have a real time response for switching between pages. This would "drag" the page in a 1:1 movement with the users swipe gesture, temporarily displaying parts of both pages simultaneously. If the swipe covers the required minimum movement the page will switch ("snap") to the next, if not the page will return to the previously displayed page. This is commonly seen with ebook readers. Here is an example of this concept switching images (example seems to be WebKit only).

Currently, you must complete a swipe and then the page changes.

This is my current code (huge thanks to Phill Pafford):

JSFiddle

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Application</title>

    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0/css/themes/default/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
    <section id="page1" data-role="page">
        <header data-role="header"><h1>jQuery Mobile</h1></header>

        <div data-role="content" class="content">
            <p>First page!</p>
        </div>
        <footer data-role="footer"><h1>O'Reilly</h1></footer>
    </section>

    <section id="page2" data-role="page">
        <header data-role="header"><h1>jQuery Mobile</h1></header>

        <div data-role="content" class="content">
            <p>Second page!</p>
        </div>
        <footer data-role="footer"r><h1>O'Reilly</h1></footer>
    </section>

    <section id="page3" data-role="page">
        <header data-role="header"><h1>jQuery Mobile</h1></header>

        <div data-role="content" class="content">
            <p>Third page!</p>
        </div>
        <footer data-role="footer"><h1>O'Reilly</h1></footer>
    </section>    
</body>
</html>

jQuery:

(function($) {
    var methods = {
        init : function(options) {
            var settings = {
                callback: function() {}
            };

            if ( options ) {
                $.extend( settings, options );
                }

            $(":jqmData(role='page')").each(function() {
                $(this).bind("swiperight", function() {
                    var nextPage = parseInt($(this).attr("id").split("page")[1]) - 1;
                    if (nextPage === 0) 
                        nextPage = 3;

                    $.mobile.changePage("#page"+nextPage, {
                            transition: "slide",
                            reverse: false
                        });
                    });                        

                $(this).bind("swipeleft", function() {
                    var nextPage = parseInt($(this).attr("id").split("page")[1]) +1;
                    if (nextPage === 4) 
                        nextPage = 1;

                    $.mobile.changePage("#page"+nextPage, {
                        transition: "slide",
                        reverse: true
                    });
                });
            })
        }
        }

    $.fn.initApp = function(method) {
        if ( methods[method] ) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } 
        else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } 
        else {
            $.error( 'Method ' + method + ' does not exist' );
        }
    }
    })(jQuery);

$(document).ready(function(){
    $().initApp();
});

How can I incorporate this real time switching?

Upvotes: 1

Views: 3021

Answers (1)

block14
block14

Reputation: 619

I was able to do this by using the Swiper jQuery plugin writen by iDangero.us. Although I wasn't looking for another code solution but to use the existing jQuery library this seems to be the best and only option right now. I will have to switch my pages from the format jQuery Mobile uses to the Swiper format.

HTML structure from their examples:

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide">
        <div class="title">Slide 1</div>
      </div>
      <div class="swiper-slide blue-slide">
        <div class="title">Slide 2</div>
      </div>
      <div class="swiper-slide orange-slide">
        <div class="title">Slide 3</div>
      </div>
      <div class="swiper-slide green-slide">
        <div class="title">Slide 4</div>
      </div>
      <div class="swiper-slide pink-slide">
        <div class="title">Slide 5</div>
      </div>
      <div class="swiper-slide red-slide">
        <div class="title">Slide 6</div>
      </div>
      <div class="swiper-slide blue-slide">
        <div class="title">Slide 7</div>
      </div>
      <div class="swiper-slide orange-slide">
        <div class="title">Slide 8</div>
      </div>
    </div>
    <div class="pagination"></div>
  </div>
  <script src="js/jquery-1.10.1.min.js"></script>
  <script src="js/idangerous.swiper-2.1.min.js"></script>
  <script>
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true
  })
  </script>

The code and examples can be downloaded at the Swiper project on GitHub.

If somebody answers with how to do this using only jQuery or jQuery Mobile I will switch the best answer to your answer.

Upvotes: 1

Related Questions