Create a gist now

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<title>ScrollView With Pagination</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
/* Avoid resource latency for these, since they hide unenhanced content */
.yui3-js-enabled .yui3-scrollview-loading {
#additional-content {
<link rel="stylesheet" href="" type="text/css" charset="utf-8">
<link rel="stylesheet" href="" type="text/css" charset="utf-8">
<link media="handheld, only screen and (max-device-width: 480px)" href="" type="text/css" rel="stylesheet" charset="utf-8">
<script src="" type="text/javascript" charset="utf-8"></script>
<body class="yui3-skin-sam">
<div id="scrollview-container">
<div id="scrollview-header">
<h1>Paged ScrollView</h1>
<div id="scrollview-content" class="yui3-scrollview-loading">
<li><div id="vid1"></div></li>
<li><img src="" alt="Walls and Canyon"></li>
<li><img src="" alt="Stairs Using In Situ Stone"></li>
<li><img src="" alt="Tree Silhouette"></li>
<div id="scrollview-pager">
<button id="scrollview-prev">Prev</button>
<button id="scrollview-next">Next</button>
<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: {
axis: "x"
scrollView.plug(Y.Plugin.ScrollViewPaginator, {
selector: 'li'
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) {
}, "img, video");
// Prevent default image drag behavior
content.delegate("mousedown", function(e) {
}, "img, video");'#scrollview-next').on('click', Y.bind(, scrollView.pages));'#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.innerHTML = "<video controls='controls' poster='' id='vidplayer' width='300' height='200'><source src='' type='video/mp4' /></video>";
var video ='firstChild');
video.on('gesturemovestart', Y.bind(scrollView._onGestureMoveStart, scrollView));
}, "#scrollview-content");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment