thomasdegry · June 13, 2014 14:26
diff --git a/gistfile1.txt b/gistfile1.txt
 <!doctype html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Swipe</title>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #wrapper {
            display: block;
            width: 200%;
            height: 100%;

            -webkit-transition: all 500ms ease-out 0s;
            -moz-transition: all 500ms ease-out 0s;
            -o-transition: all 500ms ease-out 0s;
            transition: all 500ms ease-out 0s;
        }

        .page {
            width: 50%;
            display: block;
            float: left;
        }

        .clear {
            clear: both;
        }
    </style>
 </head>
 <body>
    <div id="wrapper">
        <div class="page">
            <h1>Page 1</h1>
        </div>

        <div class="page">
            <h1>Page 2</h1>
        </div>
        <div class="clear"></div>
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="swipe.js"></script>

    <script type="text/javascript">
        var currentPage = 1;

        $("#wrapper").swipe( {
            //Generic swipe handler for all directions
            swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
              if(direction == 'left') {
                if(currentPage == 1) {
                    $('#wrapper').css('marginLeft', '-' + $(window).innerWidth() + 'px');
                    currentPage = 2;
                }
              } else if(direction == 'right') {
                if(currentPage == 2) {
                    $('#wrapper').css('marginLeft', '0px');
                    currentPage = 1;
                }
              }
            }
        });

    </script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Swipe</title>

	<style>
	html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	}

	#wrapper {
	display: block;
	width: 200%;
	height: 100%;

	-webkit-transition: all 500ms ease-out 0s;
	-moz-transition: all 500ms ease-out 0s;
	-o-transition: all 500ms ease-out 0s;
	transition: all 500ms ease-out 0s;
	}

	.page {
	width: 50%;
	display: block;
	float: left;
	}

	.clear {
	clear: both;
	}
	</style>
	</head>
	<body>
	<div id="wrapper">
	<div class="page">
	<h1>Page 1</h1>
	</div>

	<div class="page">
	<h1>Page 2</h1>
	</div>
	<div class="clear"></div>
	</div>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="swipe.js"></script>

	<script type="text/javascript">
	var currentPage = 1;

	$("#wrapper").swipe( {
	//Generic swipe handler for all directions
	swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
	if(direction == 'left') {
	if(currentPage == 1) {
	$('#wrapper').css('marginLeft', '-' + $(window).innerWidth() + 'px');
	currentPage = 2;
	}
	} else if(direction == 'right') {
	if(currentPage == 2) {
	$('#wrapper').css('marginLeft', '0px');
	currentPage = 1;
	}
	}
	}
	});

	</script>
	</body>
	</html>