Custom input for search

bitrut · Dec 13, 2011 · b1c8c18 · b1c8c18
1 parent b80f240
commit b1c8c18
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -1,7 +1,10 @@
 html{height:100%}
 body {padding-top:50px}
+.topbar input {height:28px; margin:5px 20px;}
 #drop-box{position:fixed;width:500px;height:120px;left:50%;top:50%;margin-left:-250px;margin-top:-60px;text-align:center;z-index:-1}
 #drop-box.dragover h2{color:#0B0}
 #drop-box h2{font-size:50px;line-height:60px;}
-#main-table_wrapper{display:none}
-#main-table a.title{font-weight:bold}
+#main-table_wrapper{display:none;}
+#main-table a.title{font-weight:bold}
+#main-table_filter{display:none;}
+#filter{display:none;}
diff --git a/index.html b/index.html
@@ -24,15 +24,16 @@
 
 
 <header>
-<div class="topbar">
-	<div class="fill">
-		<div class="container-fluid">
-		  <a class="brand" href="/">Easy Ratings</a>
-		  <p class="pull-left">Powered by <a href="http://imdbapi.com">The IMDb API</a></p>
-		  <p class="pull-right">&copy <a href="http://pawelkowalski.info">Paweł Kowalski</a> 2011</p>		  
+	<div class="topbar">
+		<div class="topbar-inner">
+			<div class="container-fluid">
+			  <h2><a class="brand" href="/">Easy Ratings</a></h2>
+			  <p class="pull-left">Powered by <a href="http://imdbapi.com">The IMDb API</a></p>		  
+			  <p class="pull-right">&copy <a href="http://pawelkowalski.info">Paweł Kowalski</a> 2011</p>
+			  <input type="text" placeholder="Search" id="filter" class="pull-right">
+			</div>
 		</div>
 	</div>
-</div>
 </header>
 <div id="message-box" class="container"></div>
 

diff --git a/js/script.js b/js/script.js
@@ -1,8 +1,8 @@
 table = $('#main-table');
 
 $(document).ready(function() {
-	$.fn.dataTableExt.oStdClasses.sSortAsc  = "headerSortUp";
-	$.fn.dataTableExt.oStdClasses.sSortDesc  = "headerSortDown";
+	$.fn.dataTableExt.oStdClasses.sSortAsc  = "header headerSortDown";
+	$.fn.dataTableExt.oStdClasses.sSortDesc  = "header headerSortUp";
 
     $('#main-table').dataTable({
         "bPaginate": false,
@@ -11,6 +11,11 @@ $(document).ready(function() {
             return nRow;
         }
     });
+
+    $("#filter").keyup( function () {        
+        table.fnFilter(this.value);
+    } );
+
 });
 
 
@@ -53,6 +58,7 @@ function getMovieInfo(file) {
 function handleDrop(event) {
 	$('#drop-box').hide();
 	$('#main-table_wrapper').fadeIn();
+    $('#filter').fadeIn();
     var files = event.dataTransfer.files;
     timeout = 0;
     for (var i = 0, f; f = files[i]; i++) {