josephj/focus-auto-scroll.php

## focus-auto-scroll.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="josephj">
<meta name="created" content="2013-04-10">
<title>Focus Auto Scroll</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.2/build/cssreset/reset-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.2/build/cssfonts/fonts-min.css">
<script type="text/javascript" src="http://yui.yahooapis.com/3.7.2/build/yui/yui-min.js"></script>
<style type="text/css">
body {
    text-align: center;
}
h1 {
    font-size: 26px;
    font-family: Verdana;
    font-weight: bold;
    margin: 10px 0;
}
#foo {
    border: solid 5px green;
    width: 800px;
    height: 500px;
    margin: 20px auto;
    text-align: left;
}
#foo ul {
    width: 100%;
    height: 100%;
    overflow: auto;
    zoom: 1;
}
#foo ul:after {
    content: "";
    clear: both;
    display: block;
}
#foo li {
    background: pink;
    float: left;
    height: 150px;
    width: 200px;
}
#foo li a {
    display: block;
    position: relative;
    height: 148px;
    width: 198px;
    border: solid 1px #000;
}
#foo li a:focus {
    background: red;
    /*
    outline-color: red;
    outline-style:outset;
    */
}
</style>
</head>
<body class="yui3-skin-sam">
    <h1>Focus Auto Scroll</h1>
    <p>請按 Tab 或 Shift Tab 操作。</p>
    <div id="foo">
        <ul>
<?php for ($i = 0, $j = rand(40, 100); $i < $j; $i++): ?>
            <li>
                <a href="javascript:void(0);">Link #<?php echo $i; ?></a>
            </li>
<?php endfor; ?>
        </ul>
    </div>
    <script>
    YUI().use("anim", "event-resize", "event-focus", "event-delegate", function (Y) {

        var _handleFocus,
            _log;

        _log = function (message, type, module) {
            type = type || "info";
            module = module || "focus-auto-scroll";
            Y.log(message, type, module);
        };

       /**
        * Will be scrolled to proper position when focused node
        * execeeds current viewport.
        */
       _handleFocus = function (e) {
            var anim,
                container,
                isDoc,
                node,
                nodeY,        // node offsetY position.
                nodeHeight,   // Height of each node. (MUST BE THE SAME)
                rowTotal,     // Available amount of rows within the viewport.
                scrollY,      // Current scroll position.
                scrollHeight, // Current scroll height.
                scrollTop,    // Target scrollTop value.
                viewHeight;

            node = e.currentTarget,
            container = this;
            isDoc = (container._node === document || container._node === window || container._node === document.body);
            nodeY = (isDoc) ? node.get("region").top : node.get("offsetTop") - container.get("region").top;
            nodeHeight = node.get("offsetHeight");
            scrollY = (isDoc) ? node.get("docScrollY") : container.get("scrollTop");
            viewHeight = (isDoc) ? node.get("winHeight") : container.get("offsetHeight");
            scrollHeight = viewHeight + scrollY;

            // Scroll down when focused node exceeds viewport.
            if (nodeY + nodeHeight >= scrollHeight) {
                _log("_handleFocus() - Scroll down " +
                     "(nodeBottomY = " + (nodeY + nodeHeight) + ", " +
                     "scrollHeight = " + scrollHeight + ").");

                scrollTop = nodeY;

            // Scroll up.
            } else if (nodeY < scrollY) {
                _log("_handleFocus() - Scroll up " +
                     "(nodeTopY = " + nodeY + ", " +
                     "scrollY = " + scrollY + ").");

                // Caculates target scrollTop.
                rowTotal = Math.floor(viewHeight / nodeHeight);
                scrollTop = nodeY - (rowTotal - 1) * nodeHeight;
                scrollTop = (scrollTop <= 0) ? 0 : scrollTop;
            }

            // Makes scrolling while scrollTop isn't undefined.
            if (scrollTop) {
                anim = new Y.Anim({
                    duration: 0.8,
                    easing: "easeIn",
                    node: this,
                    to: {
                        scrollTop: scrollTop
                    }
                });
                anim.run();
            }
        }

        //Y.delegate("focus", _handleFocus, "body", "a");
        Y.delegate("focus", _handleFocus, "#foo ul", "a", Y.one("#foo ul"));

        // Focus the first element.
        Y.one("a").focus();
    });

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="author" content="josephj">
	<meta name="created" content="2013-04-10">
	<title>Focus Auto Scroll</title>
	<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.2/build/cssreset/reset-min.css">
	<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.2/build/cssfonts/fonts-min.css">
	<script type="text/javascript" src="http://yui.yahooapis.com/3.7.2/build/yui/yui-min.js"></script>
	<style type="text/css">
	body {
	text-align: center;
	}
	h1 {
	font-size: 26px;
	font-family: Verdana;
	font-weight: bold;
	margin: 10px 0;
	}
	#foo {
	border: solid 5px green;
	width: 800px;
	height: 500px;
	margin: 20px auto;
	text-align: left;
	}
	#foo ul {
	width: 100%;
	height: 100%;
	overflow: auto;
	zoom: 1;
	}
	#foo ul:after {
	content: "";
	clear: both;
	display: block;
	}
	#foo li {
	background: pink;
	float: left;
	height: 150px;
	width: 200px;
	}
	#foo li a {
	display: block;
	position: relative;
	height: 148px;
	width: 198px;
	border: solid 1px #000;
	}
	#foo li a:focus {
	background: red;
	/*
	outline-color: red;
	outline-style:outset;
	*/
	}
	</style>
	</head>
	<body class="yui3-skin-sam">
	<h1>Focus Auto Scroll</h1>
	<p>請按 Tab 或 Shift Tab 操作。</p>
	<div id="foo">
	<ul>
	<?php for ($i = 0, $j = rand(40, 100); $i < $j; $i++): ?>
	<li>
	<a href="javascript:void(0);">Link #<?php echo $i; ?></a>
	</li>
	<?php endfor; ?>
	</ul>
	</div>
	<script>
	YUI().use("anim", "event-resize", "event-focus", "event-delegate", function (Y) {

	var _handleFocus,
	_log;

	_log = function (message, type, module) {
	type = type \|\| "info";
	module = module \|\| "focus-auto-scroll";
	Y.log(message, type, module);
	};

	/**
	* Will be scrolled to proper position when focused node
	* execeeds current viewport.
	*/
	_handleFocus = function (e) {
	var anim,
	container,
	isDoc,
	node,
	nodeY, // node offsetY position.
	nodeHeight, // Height of each node. (MUST BE THE SAME)
	rowTotal, // Available amount of rows within the viewport.
	scrollY, // Current scroll position.
	scrollHeight, // Current scroll height.
	scrollTop, // Target scrollTop value.
	viewHeight;

	node = e.currentTarget,
	container = this;
	isDoc = (container._node === document \|\| container._node === window \|\| container._node === document.body);
	nodeY = (isDoc) ? node.get("region").top : node.get("offsetTop") - container.get("region").top;
	nodeHeight = node.get("offsetHeight");
	scrollY = (isDoc) ? node.get("docScrollY") : container.get("scrollTop");
	viewHeight = (isDoc) ? node.get("winHeight") : container.get("offsetHeight");
	scrollHeight = viewHeight + scrollY;

	// Scroll down when focused node exceeds viewport.
	if (nodeY + nodeHeight >= scrollHeight) {
	_log("_handleFocus() - Scroll down " +
	"(nodeBottomY = " + (nodeY + nodeHeight) + ", " +
	"scrollHeight = " + scrollHeight + ").");

	scrollTop = nodeY;

	// Scroll up.
	} else if (nodeY < scrollY) {
	_log("_handleFocus() - Scroll up " +
	"(nodeTopY = " + nodeY + ", " +
	"scrollY = " + scrollY + ").");

	// Caculates target scrollTop.
	rowTotal = Math.floor(viewHeight / nodeHeight);
	scrollTop = nodeY - (rowTotal - 1) * nodeHeight;
	scrollTop = (scrollTop <= 0) ? 0 : scrollTop;
	}

	// Makes scrolling while scrollTop isn't undefined.
	if (scrollTop) {
	anim = new Y.Anim({
	duration: 0.8,
	easing: "easeIn",
	node: this,
	to: {
	scrollTop: scrollTop
	}
	});
	anim.run();
	}
	}

	//Y.delegate("focus", _handleFocus, "body", "a");
	Y.delegate("focus", _handleFocus, "#foo ul", "a", Y.one("#foo ul"));

	// Focus the first element.
	Y.one("a").focus();
	});

	</script>
	</body>
	</html>