Swipe between webpages for a webapp

html webkit web-applications

15,111

Solution 1

you can use div to swipe around but not entire page in web browser.i,e you can only load pages in a div after swipe affect and not move entire page itself.

works only in chrome,safari.

here is a code if u r using jquery mobile.

$('body').live('swipeleft swiperight',function(event){
    if (event.type == "swiperight") {
       alert("swipped right side");      
    }
    if (event.type == "swipeleft") {
        alert("swipped left side");
    }
    event.preventDefault();
});

refer more here swipe detection

Solution 2

@sree got me most of the way there, but here's the code I ended up using

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
    <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.1.0.css" />
    <link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
    <script src="js/jquery.js"></script>
    <script src="docs/_assets/js/jqm-docs.js"></script>
    <script src="js/jquery.mobile-1.1.0.js"></script>

</head>

<body>

<p>random page to test on</p>
<p>Swipe1 </p>
<script type="text/javascript">
$('body').live('swipeleft swiperight',function(event){
    if (event.type == "swiperight") {
       jQuery.mobile.changePage("page2.html",{transition:'slide'});      
    }
    if (event.type == "swipeleft") {
        jQuery.mobile.changePage("page1.html",{transition:'slide'});
    }
    event.preventDefault();
});
            </script>
</body>
</html>

...and I downloaded the jquery mobile kit and kept the CSS/JS files with the same file structure

15,111

Author by

SnowboardBruin

I majored in Sociology at UCLA, so naturally my career is... A bit of IT Help Desk... A bit of programming in iOS and Android... A bit of web design... A bit of page layout... A bit of e-mail campaigns... A bit of social media management... A bit of marketing... And I have traveled the country on political campaigns Oh and I just started a blog on New Media: http://www.NewMediaNook.com/

Updated on June 21, 2022

Comments

SnowboardBruin almost 2 years

I want to create a webapp (to avoid having to program individually for iPhone, Android, BB, etc) and am looking for a swipe effect. Is there an HTML5 or webkit code simply saying "swipe to next/previous page"? (I know it would be more detail code than that, but that's the gist of what I want)
SnowboardBruin almost 12 years

Thanks @sree, this looks promising, but is there a way to make a div link to a different HTML page? I don't really want to have all the content in one HTML page, and prefer to swipe from pages. So basically <div>Page1.html</div><div>Page2.html</div><div>Page3.html</d‌iv> Thanks again for the help!!
sree almost 12 years

you can load on swipe the pages within a div , the effect would still be same like that of swipe feature ,instead of alert write this code $('#result').load('page1.html');