Skip to content

Instantly share code, notes, and snippets.

@sdesai

sdesai/gist:1349528

Created November 8, 2011 22:38
Show Gist options
  • Save sdesai/1349528 to your computer and use it in GitHub Desktop.
Save sdesai/1349528 to your computer and use it in GitHub Desktop.
Download ZIP
Nested
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=0">
<link rel="stylesheet" href="../../../../build/cssreset/cssreset-min.css" type="text/css" charset="utf-8">
<script src="../../../../build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
#main {
height: 400px;
white-space:nowrap;
}
.screen {
white-space:normal;
display:inline-block;
width:800px;
}
.nonscrollable, .scrollable {
display:inline-block;
overflow: hidden;
margin:5px;
width: 380px;
height: 380px;
}
.page {
height:400px;
}
#screen1 .nonscrollable {
background-color:#7B0099;
}
#screen2 .nonscrollable {
background-color:#3fc336;
}
#screen3 .nonscrollable {
background-color:#262d87;
}
</style>
</head>
<body class="yui3-skin-sam">
<div id="main">
<div class="screen" id="screen1">
<div class="nonscrollable"></div>
<div class="scrollable">
<div class="vertical">
<div class="page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum cursus orci, vel dignissim lorem elementum scelerisque. Integer facilisis ipsum et justo commodo molestie. Donec interdum lobortis pharetra. Aenean a orci massa. Vestibulum feugiat urna eget elit porta eu interdum est vehicula. Vivamus nec lacus neque, vel suscipit augue. Quisque ornare lobortis pretium. Vivamus sodales semper sem, at tincidunt dolor euismod vel. Praesent eleifend congue erat, in blandit turpis sagittis ornare. Donec sed iaculis urna. Donec condimentum ipsum at est gravida mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum lacus lectus, dapibus sit amet mollis at, imperdiet sit amet purus. Curabitur malesuada augue ac libero sagittis pellentesque. Donec vehicula vestibulum pulvinar. Suspendisse mi sem, aliquam vitae feugiat ut, vulputate id dui.
</div>
<div class="page">
Aenean elementum imperdiet interdum. Quisque tristique felis id mi pretium elementum. Vivamus quis erat lacus, congue dignissim velit. Etiam quis nulla massa. Praesent urna magna, placerat vel mollis eu, feugiat et neque. Pellentesque luctus rutrum turpis in hendrerit. Proin eleifend semper justo vel aliquet. Integer sed sem orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla condimentum posuere. Mauris in diam elit. Fusce vitae libero in velit imperdiet commodo. Nam feugiat condimentum vehicula.
</div>
<div class="page">
Aliquam et ipsum est, nec rhoncus magna. Praesent ultrices ligula sit amet nisl molestie mollis. Integer sit amet neque nec urna eleifend feugiat. Mauris pulvinar leo ante, id laoreet tellus. Nunc in lectus sed metus imperdiet aliquam quis sed erat. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dignissim mollis pharetra. In hac habitasse platea dictumst. Nullam interdum bibendum lacus ut gravida. Curabitur consectetur, erat a lacinia sagittis, orci dui varius dolor, non tincidunt felis mauris sed metus. Aenean semper, mauris mattis dapibus convallis, mauris libero consequat lacus, et facilisis nisl leo id velit. Etiam venenatis, urna id euismod congue, sapien eros egestas nisl, a pellentesque magna lectus id libero. Curabitur in augue vel nulla iaculis viverra. Mauris quis turpis eget felis aliquam consectetur. Nulla posuere feugiat rutrum. Proin elit neque, auctor ut pretium non, feugiat venenatis orci. Maecenas condimentum odio a mauris ornare egestas tincidunt metus posuere.
</div>
<div class="page">
Praesent hendrerit nibh tincidunt nulla dictum feugiat. Curabitur metus libero, commodo sit amet gravida et, viverra ut massa. Praesent lobortis volutpat tellus eget cursus. Donec posuere convallis rutrum. Duis vitae enim et sem ornare dictum. Suspendisse malesuada, sem vitae viverra semper, odio massa molestie augue, quis rutrum magna massa ac lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce malesuada auctor leo, non iaculis lectus pretium vestibulum. Nunc eget lacus risus, nec scelerisque magna. Cras vitae ligula tortor, aliquam rhoncus justo. Aenean sed dolor justo, quis luctus ante. Pellentesque tincidunt magna auctor urna pellentesque luctus. Nullam at orci ante. Donec pellentesque pharetra lobortis. Duis convallis egestas diam. Phasellus non erat leo, vel rutrum ligula. In hac habitasse platea dictumst. Donec vel ante quis nulla aliquam tincidunt.
</div>
</div>
</div>
</div>
<div class="screen" id="screen2">
<div class="nonscrollable"></div>
<div class="scrollable">
<div class="vertical">
<div class="page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum cursus orci, vel dignissim lorem elementum scelerisque. Integer facilisis ipsum et justo commodo molestie. Donec interdum lobortis pharetra. Aenean a orci massa. Vestibulum feugiat urna eget elit porta eu interdum est vehicula. Vivamus nec lacus neque, vel suscipit augue. Quisque ornare lobortis pretium. Vivamus sodales semper sem, at tincidunt dolor euismod vel. Praesent eleifend congue erat, in blandit turpis sagittis ornare. Donec sed iaculis urna. Donec condimentum ipsum at est gravida mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum lacus lectus, dapibus sit amet mollis at, imperdiet sit amet purus. Curabitur malesuada augue ac libero sagittis pellentesque. Donec vehicula vestibulum pulvinar. Suspendisse mi sem, aliquam vitae feugiat ut, vulputate id dui.
</div>
<div class="page">
Aenean elementum imperdiet interdum. Quisque tristique felis id mi pretium elementum. Vivamus quis erat lacus, congue dignissim velit. Etiam quis nulla massa. Praesent urna magna, placerat vel mollis eu, feugiat et neque. Pellentesque luctus rutrum turpis in hendrerit. Proin eleifend semper justo vel aliquet. Integer sed sem orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla condimentum posuere. Mauris in diam elit. Fusce vitae libero in velit imperdiet commodo. Nam feugiat condimentum vehicula.
</div>
<div class="page">
Aliquam et ipsum est, nec rhoncus magna. Praesent ultrices ligula sit amet nisl molestie mollis. Integer sit amet neque nec urna eleifend feugiat. Mauris pulvinar leo ante, id laoreet tellus. Nunc in lectus sed metus imperdiet aliquam quis sed erat. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dignissim mollis pharetra. In hac habitasse platea dictumst. Nullam interdum bibendum lacus ut gravida. Curabitur consectetur, erat a lacinia sagittis, orci dui varius dolor, non tincidunt felis mauris sed metus. Aenean semper, mauris mattis dapibus convallis, mauris libero consequat lacus, et facilisis nisl leo id velit. Etiam venenatis, urna id euismod congue, sapien eros egestas nisl, a pellentesque magna lectus id libero. Curabitur in augue vel nulla iaculis viverra. Mauris quis turpis eget felis aliquam consectetur. Nulla posuere feugiat rutrum. Proin elit neque, auctor ut pretium non, feugiat venenatis orci. Maecenas condimentum odio a mauris ornare egestas tincidunt metus posuere.
</div>
<div class="page">
Praesent hendrerit nibh tincidunt nulla dictum feugiat. Curabitur metus libero, commodo sit amet gravida et, viverra ut massa. Praesent lobortis volutpat tellus eget cursus. Donec posuere convallis rutrum. Duis vitae enim et sem ornare dictum. Suspendisse malesuada, sem vitae viverra semper, odio massa molestie augue, quis rutrum magna massa ac lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce malesuada auctor leo, non iaculis lectus pretium vestibulum. Nunc eget lacus risus, nec scelerisque magna. Cras vitae ligula tortor, aliquam rhoncus justo. Aenean sed dolor justo, quis luctus ante. Pellentesque tincidunt magna auctor urna pellentesque luctus. Nullam at orci ante. Donec pellentesque pharetra lobortis. Duis convallis egestas diam. Phasellus non erat leo, vel rutrum ligula. In hac habitasse platea dictumst. Donec vel ante quis nulla aliquam tincidunt.
</div>
</div>
</div>
</div>
<div class="screen" id="screen3">
<div class="nonscrollable"></div>
<div class="scrollable">
<div class="vertical">
<div class="page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum cursus orci, vel dignissim lorem elementum scelerisque. Integer facilisis ipsum et justo commodo molestie. Donec interdum lobortis pharetra. Aenean a orci massa. Vestibulum feugiat urna eget elit porta eu interdum est vehicula. Vivamus nec lacus neque, vel suscipit augue. Quisque ornare lobortis pretium. Vivamus sodales semper sem, at tincidunt dolor euismod vel. Praesent eleifend congue erat, in blandit turpis sagittis ornare. Donec sed iaculis urna. Donec condimentum ipsum at est gravida mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum lacus lectus, dapibus sit amet mollis at, imperdiet sit amet purus. Curabitur malesuada augue ac libero sagittis pellentesque. Donec vehicula vestibulum pulvinar. Suspendisse mi sem, aliquam vitae feugiat ut, vulputate id dui.
</div>
<div class="page">
Aenean elementum imperdiet interdum. Quisque tristique felis id mi pretium elementum. Vivamus quis erat lacus, congue dignissim velit. Etiam quis nulla massa. Praesent urna magna, placerat vel mollis eu, feugiat et neque. Pellentesque luctus rutrum turpis in hendrerit. Proin eleifend semper justo vel aliquet. Integer sed sem orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla condimentum posuere. Mauris in diam elit. Fusce vitae libero in velit imperdiet commodo. Nam feugiat condimentum vehicula.
</div>
<div class="page">
Aliquam et ipsum est, nec rhoncus magna. Praesent ultrices ligula sit amet nisl molestie mollis. Integer sit amet neque nec urna eleifend feugiat. Mauris pulvinar leo ante, id laoreet tellus. Nunc in lectus sed metus imperdiet aliquam quis sed erat. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dignissim mollis pharetra. In hac habitasse platea dictumst. Nullam interdum bibendum lacus ut gravida. Curabitur consectetur, erat a lacinia sagittis, orci dui varius dolor, non tincidunt felis mauris sed metus. Aenean semper, mauris mattis dapibus convallis, mauris libero consequat lacus, et facilisis nisl leo id velit. Etiam venenatis, urna id euismod congue, sapien eros egestas nisl, a pellentesque magna lectus id libero. Curabitur in augue vel nulla iaculis viverra. Mauris quis turpis eget felis aliquam consectetur. Nulla posuere feugiat rutrum. Proin elit neque, auctor ut pretium non, feugiat venenatis orci. Maecenas condimentum odio a mauris ornare egestas tincidunt metus posuere.
</div>
<div class="page">
Praesent hendrerit nibh tincidunt nulla dictum feugiat. Curabitur metus libero, commodo sit amet gravida et, viverra ut massa. Praesent lobortis volutpat tellus eget cursus. Donec posuere convallis rutrum. Duis vitae enim et sem ornare dictum. Suspendisse malesuada, sem vitae viverra semper, odio massa molestie augue, quis rutrum magna massa ac lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce malesuada auctor leo, non iaculis lectus pretium vestibulum. Nunc eget lacus risus, nec scelerisque magna. Cras vitae ligula tortor, aliquam rhoncus justo. Aenean sed dolor justo, quis luctus ante. Pellentesque tincidunt magna auctor urna pellentesque luctus. Nullam at orci ante. Donec pellentesque pharetra lobortis. Duis convallis egestas diam. Phasellus non erat leo, vel rutrum ligula. In hac habitasse platea dictumst. Donec vel ante quis nulla aliquam tincidunt.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
YUI({filter:"raw"}).use('scrollview-base', 'scrollview-paginator', function (Y) {
// Workaround, until we publish a "scrollStart", "scroll" events, or something similar
var mainSwiper = new Y.ScrollView({
srcNode: Y.one('#main'),
width: 800,
flick: {
minDistance:40,
minVelocity:0.5,
axis:"x"
}
});
mainSwiper.plug(Y.Plugin.ScrollViewPaginator, {
selector: '.screen'
});
mainSwiper.render();
Y.one("document").on("gesturemoveend", function() {
mainSwiper.enable();
}, {standAlone:true});
Y.all('.vertical').each(function (node) {
var startX,
startY,
endX,
endY,
lilSwiper = new Y.ScrollView({
srcNode: node,
height: 400,
flick: {
minDistance:40,
minVelocity:0.5,
axis:"y"
}
});
lilSwiper.plug(Y.Plugin.ScrollViewPaginator, {
selector: '.page'
});
lilSwiper.render();
var bb = lilSwiper.get("boundingBox");
bb.on("gesturemovestart", function(e) {
var startX = e.pageX;
var startY = e.pageY;
bb.once("gesturemove", function(e) {
if ((Math.abs(e.pageX - startX) < Math.abs(e.pageY - startY))) {
mainSwiper.disable();
} else {
lilSwiper.disable();
}
});
});
Y.one("document").on("gesturemoveend", function() {
lilSwiper.enable();
}, {standAlone:true});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment