/yui_paginator_html5

## yui_paginator_html5
<!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('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));


	// Add HTML5 video (must add after scrollview-content is available for iOS);
	YUI().use('*', function(Y) {
		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);
		}, "#scrollview-content");
	});

});
        </script>
    </body>
</html>
	<!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('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));


	// Add HTML5 video (must add after scrollview-content is available for iOS);
	YUI().use('*', function(Y) {
	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);
	}, "#scrollview-content");
	});

	});
	</script>
	</body>
	</html>