tests/manual/scrollview-chrome-transform.html

	scrollview-chrome-transform.html revision 609b3fdb3368975ebd66bf9ef6a074e3ca726524
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Y.ScrollView</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

        <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="assets/tests.css" type="text/css" media="screen" title="no title" charset="utf-8">

        <link rel="stylesheet" href="/docs/assets/horizontal.css" type="text/css" charset="utf-8">
        <link media="handheld, only screen and (max-device-width: 480px)" href="/docs/assets/horizontal-smallscreen.css" type="text/css" rel="stylesheet" charset="utf-8">
        <script src="/build/yui/yui-debug.js" type="text/javascript" charset="utf-8"></script>
<style>
    .yui3-js-enabled .yui3-scrollview-loading {
        visibility:hidden;
    }
</style>
    </head>

    <body class="yui3-skin-sam">
        <div id="scrollview-container">
            <div id="scrollview-header">

                <h1>Horizontal ScrollView</h1>
            </div>

            <div id="scrollview-content" class="yui3-scrollview-loading">
                <ul>
                    <li><img src="http://farm5.static.flickr.com/4136/4802088086_c621e0b501.jpg" alt="Above The City II"></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>

        <button id="addcontent">
            Add an image
        </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.render();

                //.plug(Y.Plugin.ScrollViewPaginator, {selector: 'li'})

                // Prevent default image drag behavior
                scrollView.get("contentBox").delegate("mousedown", function(e) {
                    e.preventDefault();
                }, "img");

                Y.one('#addcontent').on('click', function() {
                    Y.one('#scrollview-content ul').append('<li><img src="http://farm5.static.flickr.com/4136/4802088086_c621e0b501.jpg" alt="Above The City II"></li>');
                    //scrollView.syncUI();
                    scrollView._uiDimensionsChange();
                });
            });
        </script>

    </body>
</html>