Added navigating with keys

This commit is contained in:
Kasper Rynning-Tønnesen
2015-01-31 00:18:35 +01:00
parent a5d1356baa
commit 1f8c84bfba
2 changed files with 45 additions and 10 deletions

View File

@@ -4,6 +4,8 @@ var timer = 0;
$(document).ready(function() $(document).ready(function()
{ {
$( "#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = undefined; }, function() { });
$("#search").focus(); $("#search").focus();
@@ -17,6 +19,7 @@ $(document).ready(function()
$(".search_input").focus(); $(".search_input").focus();
$(".search_input").keyup(function(event) { $(".search_input").keyup(function(event) {
if (event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13) {
var search_input = $(this).val(); var search_input = $(this).val();
if(search_input.length < 3){$("#results").html("");} if(search_input.length < 3){$("#results").html("");}
if(event.keyCode == 13){ if(event.keyCode == 13){
@@ -27,6 +30,7 @@ $(document).ready(function()
}else{ }else{
timer=100; timer=100;
} }
}
}); });
@@ -35,10 +39,39 @@ $(document).ready(function()
timer--; timer--;
if(timer===0){ if(timer===0){
search($(".search_input").val()); search($(".search_input").val());
i = 0;
} }
}, 1); }, 1);
}); });
$(document).keyup(function(e) {
if ($("div.result").length > 2){
if (e.keyCode == 40) {
if(i < $("div.result").length -2)
i++;
$("div.result:nth-child("+(i-1)+")").removeClass("hoverResults");
$("div.result:nth-child("+i+")").addClass("hoverResults");
} else if (e.keyCode == 38) {
$("div.result:nth-child("+i+")").removeClass("hoverResults");
$("div.result:nth-child("+(i-1)+")").addClass("hoverResults");
if(i > 1)
i--;
} else if(e.keyCode == 13) {
console.log($("div.hoverResults"));
i = 0;
var elem = document.getElementsByClassName("hoverResults")[0];
if (typeof elem.onclick == "function") {
elem.onclick.apply(elem);
}
$("div.hoverResults").removeClass("hoverResults");
$("#results").html('');
document.getElementById("search").value = "";
$(".main").removeClass("blurT");
$("#controls").removeClass("blurT");
}
}
});
function search(search_input){ function search(search_input){
@@ -87,7 +120,7 @@ function search(search_input){
$("#controls").addClass("blurT"); $("#controls").addClass("blurT");
} }
$("<div style='display:none;'>"+wrapper+"</div>").appendTo('#results').slideDown('slow'); $("<div id='r' style='display:none;'>"+wrapper+"</div>").appendTo('#results').slideDown('slow');
} }
else{ $("#video").html("<div id='no'>No Video</div>");} else{ $("#video").html("<div id='no'>No Video</div>");}

View File

@@ -51,6 +51,8 @@ body{background:#000; margin:0; }
.result_info{color:#D7D7D7; font-size: 12px; /* float:right; */padding-top: 6px;} .result_info{color:#D7D7D7; font-size: 12px; /* float:right; */padding-top: 6px;}
.thumb{height: 55px; border-radius:3px; float: left; margin: 7px 0px 7px 15px;} .thumb{height: 55px; border-radius:3px; float: left; margin: 7px 0px 7px 15px;}
.hoverResults{color:white !important;background-color: rgba(0, 0, 0, 0.4);}
.main{width:90%; margin: 0 auto 0 auto;transition: 0.75s -webkit-filter linear; -webkit-transform: translate3d(0,0,0); .main{width:90%; margin: 0 auto 0 auto;transition: 0.75s -webkit-filter linear; -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0);