CODEWITHSUNDEEP
iphoneweb-applications
user681061
user681061

Reputation: 255

Webapp that uses "UIScrollView" in html

I would like to make a webapp that uses the "UIScrollView" xcode-function but in html.

There's no problem making a html page that puts a bunch of images in one row.. I just want to make a iphone horizontal scroll with swipe gesture to show the next image.

Can this be made?

Upvotes: 0

Views: 591

Answers (1)

Robot Woods
Robot Woods

Reputation: 5687

You'll need to watch for touchstart and touchend (or touchmove) to figure out the direction, then just replace the image with the next/previous. Here are some links:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Untested:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var startX;
var endX;
var pic=0;
var pics = ['pic1.png','pic2.png','pic3.png'];
document.getElementById('picture').setAttribute('src',pics[pic]);

function touchStart(event){
    startX = event.touches[0].pageX;
}

function touchEnd(event){
    endX = event.touches[0].pageX;
    deltaX=endX-startX;
    if(deltaX>0){
        next();
    }
    else{
        prev();
    }
}

function next(){
    pic++;
    if(pic>pics.length){pic--;}
    document.getElementById('picture').setAttribute('src',pics[pic]);
}

function previous(){
    pic--;
    if(pic<0){pic++;}
    document.getElementById('picture').setAttribute('src',pics[pic]);
}
</script>
<style>
#pictureFrame{height:460px; width:320px; top:0; left:0;}
</style>

</head>

<body>
<div id="pictureFrame"><img ontouchstart="touchStart(event);" ontouchend="touchEnd(event);" id="picture"/></div>
</body>
</html>

Upvotes: 1

Related Questions