Problems to make vertical snap work...
57 views
Skip to first unread message
Meo
Dec 2, 2010, 3:31:41 AM12/2/10
to iScroll
First of all: Thank you for this wonderfull piece of JS.
I try to make the snap work on a vertical iScroller. Here is my code,
can anyone help me?
It always snaps to the top of the col. But not on each element. Does
anyone has some advice?
<!DOCTYPE html>
<html lang="en">
<head>
<title>SI Style Slot Machine</title>
<meta charset="utf-8">
<meta name="description" content="SI Style Slot Machine">
<meta name="viewport" content="width=device-width; initial-
scale=1.0; maximum-scale=1.0;">
<link rel="stylesheet" href="css/reset.css" type="text/css"
media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css"
media="screen">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></
script>
<script type="text/javascript" src="js/iscroll.js?v3.7.1"></
script>
<script type="text/javascript">
function loaded() {
document.addEventListener('touchmove', function(e)
{ e.preventDefault(); });
$(".left").each(function(index, itm) {
new iScroll(itm, 'y', { snap:true, momentum:true,
vScrollbar:false, hScrollbar:false, desktopCompatibility: true });
});
};
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</head>
<body>
<div class="wrap">
<div id="imageslot1" class="left">
<ul class="imageslot">
some li's with img's in it
</ul>
</div>
</div>
<div class="wrap">
<div class="left">
<ul id="imageslot2" class="imageslot">
some li's with img's in it
</ul>
</div>
</div>
<div class="wrap">
<div class="left">
<ul id="imageslot3" class="imageslot">
some li's with img's in it
</ul>
</div>
</div>
</body>
</html>
I try to make the snap work on a vertical iScroller. Here is my code,
can anyone help me?
It always snaps to the top of the col. But not on each element. Does
anyone has some advice?
<!DOCTYPE html>
<html lang="en">
<head>
<title>SI Style Slot Machine</title>
<meta charset="utf-8">
<meta name="description" content="SI Style Slot Machine">
<meta name="viewport" content="width=device-width; initial-
scale=1.0; maximum-scale=1.0;">
<link rel="stylesheet" href="css/reset.css" type="text/css"
media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css"
media="screen">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></
script>
<script type="text/javascript" src="js/iscroll.js?v3.7.1"></
script>
<script type="text/javascript">
function loaded() {
document.addEventListener('touchmove', function(e)
{ e.preventDefault(); });
$(".left").each(function(index, itm) {
new iScroll(itm, 'y', { snap:true, momentum:true,
vScrollbar:false, hScrollbar:false, desktopCompatibility: true });
});
};
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</head>
<body>
<div class="wrap">
<div id="imageslot1" class="left">
<ul class="imageslot">
some li's with img's in it
</ul>
</div>
</div>
<div class="wrap">
<div class="left">
<ul id="imageslot2" class="imageslot">
some li's with img's in it
</ul>
</div>
</div>
<div class="wrap">
<div class="left">
<ul id="imageslot3" class="imageslot">
some li's with img's in it
</ul>
</div>
</div>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages