Skip to content

Instantly share code, notes, and snippets.

@tedshd

tedshd/loop.html

Created April 9, 2013 08:54
Show Gist options
  • Save tedshd/5344159 to your computer and use it in GitHub Desktop.
Save tedshd/5344159 to your computer and use it in GitHub Desktop.
Download ZIP
channel loop
Raw
loop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loop</title>
<style>
body {
/*overflow: hidden;*/
}
.loop {
width: 320px;
height: 240px;
margin: 20px 0 0 20px;
background: gray;
}
.focus {
background: #eee;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>
<script>
$(document).ready(function() {
// var l = $(".focus").length();
// console.log($(".loop").length());
document.onkeydown = function(e) {
e.preventDefault();
if (e.keyCode == "38") {
var p = $(".focus").index() - 1;
$(".focus").removeClass("focus");
$(".loop:eq(" + p + ")").addClass("focus");
}
if (e.keyCode == "40") {
var n = $(".focus").index() + 1;
$(".focus").removeClass("focus");
$(".loop:eq(" + n + ")").addClass("focus");
}
};
});
</script>
</head>
<body>
<div class="focus loop"></div>
<div class="loop"></div>
<div class="loop"></div>
<div class="loop"></div>
<div class="loop"></div>
<div class="loop"></div>
<div class="loop"></div>
<div class="loop"></div>
<div class="loop"></div>
<div class="loop"></div>
<div class="loop"></div>
<div class="loop"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment