<html>
<head>
<script type="text/javascript">
var selecteditem;
function load()
{
var lists = document.getElementById('container').getElementsByTagName('ol');
for ( var i = 0; i < lists.length; i++ )
{
if ( lists[i].className == 'itemList' ) continue;
lists[i].onscroll = updateSelecteditem;
var items = lists[i].getElementsByTagName('li');
for ( var j = 0; j < items.length; j++ )
{
items[j].onclick = function() { changeFocus(this, true); };
}
}
}
function changeFocus(item, force)
{
if ( selecteditem ) selecteditem.className = '';
selecteditem = item;
selecteditem.className = 'selected';
if ( force ) selecteditem.scrollIntoView(true);
}
function updateSelecteditem(event)
{
var items = event.currentTarget.getElementsByTagName('li');
var height = event.currentTarget.scrollHeight;
var displayHeight = event.currentTarget.clientHeight;
var scrollPosition = event.currentTarget.scrollTop;
var reverse;
if ( scrollPosition > ( selecteditem.offsetTop + (.15 * selecteditem.scrollHeight) ) )
{
reverse = false;
}
else if ( scrollPosition < ( selecteditem.offsetTop - (selecteditem.scrollHeight) ) )
{
reverse = true;
}
else
{
return;
}
for ( var next = nextNode(selecteditem, reverse); nextNode(next, reverse); next = nextNode(next, reverse) )
{
if ( next.offsetTop > scrollPosition )
{
changeFocus(next);
return;
}
}
}
function nextNode(node, reverse)
{
return ( reverse ? node.previousSibling : node.nextSibling );
}
</script>
<style type="text/css">
html, body { width: 100%; }
#container
{
position: relative;
top: 4em;
height: 650px;
width: 90%;
z-index: 10;
}
ol.itemList li ol
{
display: none;
width: 100%;
position: absolute;
top: -20px;
bottom: 0px;
right: 0px;
padding: 10px;
width: 80%;
border: 2px white groove;
background: #white;
list-style: none;
overflow: auto;
}
.active
{
display: block !important;
}
ol.active li:last-child
{
margin-bottom: 200px;
}
ol.itemList li ol li
{
margin: 5px 10px;
padding: 10px;
border: 2px black solid;
background: grey;
opacity: .5;
filter: alpha(opacity=50);
-moz-border-radius: 15px;
}
.selected
{
background: white !important;
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
body { position: fixed; }
</style>
</head>
<body onload="load();">
<div id="container">
<ol class="itemList">
<li>
<h2>Category</h2>
<ol class="active">
<li>
<form name="aaa">
<p>AAA: aaa</p>
<p>BBB: bbb</p>
<p>CCC: ccc</p>
<p>DDD: ddd</p>
<p>EEE: eee</p>
<p>FFF: foo bar baz quux</p>
</form>
</li>
<li>
<form name="aaa">
<p>AAA: aaa</p>
<p>BBB: bbb</p>
<p>CCC: ccc</p>
<p>DDD: ddd</p>
<p>EEE: eee</p>
<p>FFF: foo bar baz quux</p>
</form>
</li>
<li>
<form name="aaa">
<p>AAA: aaa</p>
<p>BBB: bbb</p>
<p>CCC: ccc</p>
<p>DDD: ddd</p>
<p>EEE: eee</p>
<p>FFF: foo bar baz quux</p>
</form>
</li>
<li>
<form name="aaa">
<p>AAA: aaa</p>
<p>BBB: bbb</p>
<p>CCC: ccc</p>
<p>DDD: ddd</p>
<p>EEE: eee</p>
<p>FFF: foo bar baz quux</p>
</form>
</li>
<li>
<form name="aaa">
<p>AAA: aaa</p>
<p>BBB: bbb</p>
<p>CCC: ccc</p>
<p>DDD: ddd</p>
<p>EEE: eee</p>
<p>FFF: foo bar baz quux</p>
</form>
</li>
<li>
<form name="aaa">
<p>AAA: aaa</p>
<p>BBB: bbb</p>
<p>CCC: ccc</p>
<p>DDD: ddd</p>
<p>EEE: eee</p>
<p>FFF: foo bar baz quux</p>
</form>
</li>
<li>
<form name="aaa">
<p>AAA: aaa</p>
<p>BBB: bbb</p>
<p>CCC: ccc</p>
<p>DDD: ddd</p>
<p>EEE: eee</p>
<p>FFF: foo bar baz quux</p>
</form>
</li>
<li>
<form name="aaa">
<p>AAA: aaa</p>
<p>BBB: bbb</p>
<p>CCC: ccc</p>
<p>DDD: ddd</p>
<p>EEE: eee</p>
<p>FFF: foo bar baz quux</p>
</form>
</li>
<li>
<form name="aaa">
<p>AAA: aaa</p>
<p>BBB: bbb</p>
<p>CCC: ccc</p>
<p>DDD: ddd</p>
<p>EEE: eee</p>
<p>FFF: foo bar baz quux</p>
</form>
</li>
<!--li style="height: 200px; background: #6C706D; border: none !important;"></li-->
</ol>
</li>
</ol>
</div>
</body>
</html>