mirror of
				https://github.com/KevinMidboe/zoff.git
				synced 2025-10-29 18:00:23 +00:00 
			
		
		
		
	Added navigating with keys
This commit is contained in:
		
							
								
								
									
										35
									
								
								js/search.js
									
									
									
									
									
								
							
							
						
						
									
										35
									
								
								js/search.js
									
									
									
									
									
								
							@@ -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>");}
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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);
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user