added basic horizontal scroll buttons

infamily · Jan 16, 2016 · ecb15f9 · ecb15f9
1 parent d966672
commit ecb15f9
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 0 deletions.
diff --git a/src/static/css/infinity.css b/src/static/css/infinity.css
@@ -308,3 +308,42 @@ a:visited{
   background-color: #000;
   border-color: #505050;
 }
+
+#scroll_arrowleft {
+    position:absolute;
+	background-image: url(/static/fonts/arrow-left.svg);
+	background-position-x: 50%;
+	background-position-y: 50%;
+	background-position: center;
+	background-size: 60px 60px;
+	background-repeat: no-repeat;
+	width: 29px;
+	height: 300px;
+	cursor: pointer;
+    bottom:30%;
+    left:2px;
+	float: left;
+	margin-left: auto;
+	margin-right: auto;
+    z-index: 1;
+}
+
+#scroll_arrowright {
+    position:absolute;
+	background-image: url(/static/fonts/arrow-right.svg);
+	background-position-x: 50%;
+	background-position-y: 50%;
+	background-position: center;
+	background-size: 60px 60px;
+	background-repeat: no-repeat;
+	width: 29px;
+	height: 300px;
+	cursor: pointer;
+    bottom:30%;
+    right:2px;
+	margin-left: auto;
+	margin-right: auto;
+    z-index: 1;
+}
+
+
diff --git a/src/static/fonts/arrow-left.svg b/src/static/fonts/arrow-left.svg
diff --git a/src/static/fonts/arrow-right.svg b/src/static/fonts/arrow-right.svg
diff --git a/src/static/js/infinity.js b/src/static/js/infinity.js
@@ -26,3 +26,17 @@ $(function() {
     $("#div_id_url").show();
   }
 });
+
+$(function(){
+
+    // Scroll screen horizontally by one screen
+    $('#scroll_arrowleft').on("click",function(event){
+      $( "div.row-horizon" ).scrollLeft( -$(window).width() );
+			event.preventDefault();
+    });
+
+    $('#scroll_arrowright').on("click",function(event){
+      $( "div.row-horizon" ).scrollLeft( $(window).width() );
+			event.preventDefault();
+    });
+});
diff --git a/src/templates/home.html b/src/templates/home.html
@@ -51,9 +51,13 @@
 
     <link rel="stylesheet" href="/static/css/bootstrap-horizon.css">
 
+    <div id="scroll_arrowleft"></div>
+    <div id="scroll_arrowright"></div>
+
     <div class="row row-horizon">
 
 <!-- start of Need -->
+
         <div class="panel panel-default col-md-7 block-content">
             <div class="panel-heading">
                 {% trans "Needs" %}