Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
<!DOCTYPE html>
<html>
<head>
<title>ScrollView With Pagination</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
/* Avoid resource latency for these, since they hide unenhanced content */
.yui3-js-enabled .yui3-scrollview-loading {
visibility:hidden;
}
#additional-content {
display:none;
}
</style>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="http://developer.yahoo.com/yui/3/examples/scrollview/assets/horizontal.css" type="text/css" charset="utf-8">
<link media="handheld, only screen and (max-device-width: 480px)" href="http://developer.yahoo.com/yui/3/examples/scrollview/assets/horizontal-smallscreen.css" type="text/css" rel="stylesheet" charset="utf-8">
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="yui3-skin-sam">
<div id="scrollview-container">
<div id="scrollview-header">
<h1>Paged ScrollView</h1>
</div>
<div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li><div id="vid1"></div></li>
<li><img src="http://farm5.static.flickr.com/4114/4801461321_1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="http://farm5.static.flickr.com/4100/4801614015_4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li>
<li><img src="http://farm5.static.flickr.com/4076/4801368583_854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</ul>
</div>
<div id="scrollview-pager">
<button id="scrollview-prev">Prev</button>
<button id="scrollview-next">Next</button>
</div>
</div>
<script type="text/javascript" charset="utf-8">
YUI().use('node', 'scrollview', 'scrollview-paginator', function(Y) {
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode : '#scrollview-content',
width : 320,
flick: {
minDistance:10,
minVelocity:0.3,
axis: "x"
}
});
scrollView.plug(Y.Plugin.ScrollViewPaginator, {
selector: 'li'
});
scrollView.render();
var content = scrollView.get("contentBox");
content.delegate("click", function(e) {
// For mouse based devices, we need to make sure the click isn't fired
// at the end of a drag/flick. We're use 2 as an arbitrary threshold.
if (Math.abs(scrollView.lastScrolledAmt) < 2) {
alert(e.currentTarget.getAttribute("alt"));
}
}, "img, video");
// Prevent default image drag behavior
content.delegate("mousedown", function(e) {
e.preventDefault();
}, "img, video");
Y.one('#scrollview-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
Y.one('#scrollview-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
Y.on("available", function () {
var ni = document.getElementById('vid1');
var divIdName = "newDiv1";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<video controls='controls' poster='http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg' id='vidplayer' width='300' height='200'><source src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' type='video/mp4' /></video>";
ni.appendChild(newdiv);
var video = Y.one(newdiv).get('firstChild');
video.on('gesturemovestart', Y.bind(scrollView._onGestureMoveStart, scrollView));
}, "#scrollview-content");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.