Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Dec 14th, 2008  |  syntax: HTML  |  size: 4.45 KB  |  views: 361  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <script type="text/javascript">
  2. var selecteditem;
  3. function load()
  4. {
  5.         var lists = document.getElementById('container').getElementsByTagName('ol');
  6.         for ( var i = 0; i < lists.length; i++ )
  7.         {
  8.                 if ( lists[i].className == 'itemList' ) continue;
  9.                
  10.                 lists[i].onscroll = updateSelecteditem;
  11.                 var items = lists[i].getElementsByTagName('li');
  12.                 for ( var j = 0; j < items.length; j++ )
  13.                 {
  14.                         items[j].onclick = function() { changeFocus(this, true); };
  15.                 }
  16.         }
  17. }
  18.  
  19. function changeFocus(item, force)
  20. {
  21.         if ( selecteditem ) selecteditem.className = '';
  22.         selecteditem = item;
  23.         selecteditem.className = 'selected';
  24.         if ( force ) selecteditem.scrollIntoView(true);
  25. }
  26.  
  27. function updateSelecteditem(event)
  28. {
  29.         var items = event.currentTarget.getElementsByTagName('li');
  30.         var height = event.currentTarget.scrollHeight;
  31.         var displayHeight = event.currentTarget.clientHeight;
  32.         var scrollPosition = event.currentTarget.scrollTop;
  33.         var reverse;
  34.         if ( scrollPosition > ( selecteditem.offsetTop + (.15 * selecteditem.scrollHeight) ) )
  35.         {
  36.                 reverse = false;
  37.         }
  38.         else if ( scrollPosition < ( selecteditem.offsetTop - (selecteditem.scrollHeight) ) )
  39.         {
  40.                 reverse = true;
  41.         }
  42.         else
  43.         {
  44.                 return;
  45.         }
  46.         for ( var next = nextNode(selecteditem, reverse); nextNode(next, reverse); next = nextNode(next, reverse) )
  47.         {
  48.                 if ( next.offsetTop > scrollPosition )
  49.                 {
  50.                         changeFocus(next);
  51.                         return;
  52.                 }
  53.         }
  54. }
  55.  
  56. function nextNode(node, reverse)
  57. {
  58.         return ( reverse ? node.previousSibling : node.nextSibling );
  59. }
  60. <style type="text/css">
  61. html, body { width: 100%; }
  62. #container
  63. {
  64.         position: relative;
  65.         top: 4em;
  66.         height: 650px;
  67.         width: 90%;
  68.         z-index: 10;
  69. }
  70.  
  71. ol.itemList li ol
  72. {
  73.         display: none;
  74.         width: 100%;
  75.         position: absolute;
  76.         top: -20px;
  77.         bottom: 0px;
  78.         right: 0px;
  79.         padding: 10px;
  80.         width: 80%;
  81.         border: 2px white groove;
  82.         background: #white;
  83.         list-style: none;
  84.         overflow: auto;
  85. }
  86.  
  87. .active
  88. {
  89.         display: block !important;
  90. }
  91.  
  92. ol.active li:last-child
  93. {
  94.         margin-bottom: 200px;
  95. }
  96.  
  97. ol.itemList li ol li
  98. {
  99.         margin: 5px 10px;
  100.         padding: 10px;
  101.         border: 2px black solid;
  102.         background: grey;
  103.         opacity: .5;
  104.         filter: alpha(opacity=50);
  105.         -moz-border-radius: 15px;
  106. }
  107.  
  108. .selected
  109. {
  110.         background: white !important;
  111.         opacity: 1 !important;
  112.         filter: alpha(opacity=100) !important;
  113. }
  114.  
  115. body { position: fixed; }
  116. </head>
  117. <body onload="load();">
  118. <div id="container">
  119.         <ol class="itemList">
  120.                 <li>
  121.                         <h2>Category</h2>
  122.                         <ol class="active">
  123.                                 <li>
  124.                                         <form name="aaa">
  125.                                                 <p>AAA: aaa</p>
  126.                                                 <p>BBB: bbb</p>
  127.                                                 <p>CCC: ccc</p>
  128.                                                 <p>DDD: ddd</p>
  129.                                                 <p>EEE: eee</p>
  130.                                                 <p>FFF: foo bar baz quux</p>
  131.                                         </form>
  132.                                 </li>
  133.                                 <li>
  134.                                         <form name="aaa">
  135.                                                 <p>AAA: aaa</p>
  136.                                                 <p>BBB: bbb</p>
  137.                                                 <p>CCC: ccc</p>
  138.                                                 <p>DDD: ddd</p>
  139.                                                 <p>EEE: eee</p>
  140.                                                 <p>FFF: foo bar baz quux</p>
  141.                                         </form>
  142.                                 </li>
  143.                                 <li>
  144.                                         <form name="aaa">
  145.                                                 <p>AAA: aaa</p>
  146.                                                 <p>BBB: bbb</p>
  147.                                                 <p>CCC: ccc</p>
  148.                                                 <p>DDD: ddd</p>
  149.                                                 <p>EEE: eee</p>
  150.                                                 <p>FFF: foo bar baz quux</p>
  151.                                         </form>
  152.                                 </li>
  153.                                 <li>
  154.                                         <form name="aaa">
  155.                                                 <p>AAA: aaa</p>
  156.                                                 <p>BBB: bbb</p>
  157.                                                 <p>CCC: ccc</p>
  158.                                                 <p>DDD: ddd</p>
  159.                                                 <p>EEE: eee</p>
  160.                                                 <p>FFF: foo bar baz quux</p>
  161.                                         </form>
  162.                                 </li>
  163.                                 <li>
  164.                                         <form name="aaa">
  165.                                                 <p>AAA: aaa</p>
  166.                                                 <p>BBB: bbb</p>
  167.                                                 <p>CCC: ccc</p>
  168.                                                 <p>DDD: ddd</p>
  169.                                                 <p>EEE: eee</p>
  170.                                                 <p>FFF: foo bar baz quux</p>
  171.                                         </form>
  172.                                 </li>
  173.                                 <li>
  174.                                         <form name="aaa">
  175.                                                 <p>AAA: aaa</p>
  176.                                                 <p>BBB: bbb</p>
  177.                                                 <p>CCC: ccc</p>
  178.                                                 <p>DDD: ddd</p>
  179.                                                 <p>EEE: eee</p>
  180.                                                 <p>FFF: foo bar baz quux</p>
  181.                                         </form>
  182.                                 </li>
  183.                                 <li>
  184.                                         <form name="aaa">
  185.                                                 <p>AAA: aaa</p>
  186.                                                 <p>BBB: bbb</p>
  187.                                                 <p>CCC: ccc</p>
  188.                                                 <p>DDD: ddd</p>
  189.                                                 <p>EEE: eee</p>
  190.                                                 <p>FFF: foo bar baz quux</p>
  191.                                         </form>
  192.                                 </li>
  193.                                 <li>
  194.                                         <form name="aaa">
  195.                                                 <p>AAA: aaa</p>
  196.                                                 <p>BBB: bbb</p>
  197.                                                 <p>CCC: ccc</p>
  198.                                                 <p>DDD: ddd</p>
  199.                                                 <p>EEE: eee</p>
  200.                                                 <p>FFF: foo bar baz quux</p>
  201.                                         </form>
  202.                                 </li>
  203.                                 <li>
  204.                                         <form name="aaa">
  205.                                                 <p>AAA: aaa</p>
  206.                                                 <p>BBB: bbb</p>
  207.                                                 <p>CCC: ccc</p>
  208.                                                 <p>DDD: ddd</p>
  209.                                                 <p>EEE: eee</p>
  210.                                                 <p>FFF: foo bar baz quux</p>
  211.                                         </form>
  212.                                 </li>
  213.                                 <!--li style="height: 200px; background: #6C706D; border: none !important;"></li-->
  214.                         </ol>
  215.                 </li>
  216.         </ol>
  217. </div>
  218. </body>
  219. </html>