Created
July 25, 2016 06:07
-
-
Save sbarratt/25d29f73595aa5a79dfaf5cc17525523 to your computer and use it in GitHub Desktop.
Scroll through a list of items nicely.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| #content { | |
| font-size: 18; | |
| text-align: center; | |
| padding-top: 150px; | |
| } | |
| .blurry-text { | |
| color: transparent; | |
| text-shadow: 0 0 0.5px rgba(0,0,0,0.7); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <span id="data" class=""></span> | |
| </div> | |
| </body> | |
| <script> | |
| data = ["1", "2", "3", "4", "5", "6", "7", "8"] | |
| half_window_size = 1; | |
| data_idx = half_window_size; | |
| function updateData() { | |
| data_element = document.getElementById("data"); | |
| data_element.innerHTML = ""; | |
| for (i = data_idx - half_window_size; i <= data_idx + half_window_size; i++) { | |
| if (i == data_idx) { | |
| data_element.innerHTML += data[i]; | |
| } else { | |
| data_element.innerHTML += "<span class=\"blurry-text\">" + data[i] + "</span>"; | |
| } | |
| data_element.innerHTML += "<br \\>"; | |
| } | |
| } | |
| function checkKey(e) { | |
| UP = '38'; | |
| DOWN = '40'; | |
| e = e || window.event; | |
| if (e.keyCode == UP) { | |
| if (data_idx > half_window_size) { | |
| data_idx -= 1; | |
| } | |
| } | |
| else if (e.keyCode == DOWN) { | |
| if (data_idx < data.length - half_window_size - 1) { | |
| data_idx += 1; | |
| } | |
| } | |
| updateData(); | |
| } | |
| document.onkeydown = checkKey; | |
| updateData(); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment