public
Created — forked from /yui_paginator_html5

  • Download Gist
yui_paginator_html5.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.