Browse Source

added: scrollTop (beta)

Tobias Südkamp 7 years ago
parent
commit
f9e981a120
7 changed files with 2449 additions and 29 deletions
  1. 25 13
      debug.html
  2. 2 2
      ffms.css
  3. 23 12
      index.html.j2
  4. 2377 0
      js/bootstrap.js
  5. 7 0
      js/bootstrap.min.js
  6. 13 0
      js/npm.js
  7. 2 2
      search.js

+ 25 - 13
debug.html

@@ -6,8 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="ffms.css">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
 	<div class="container">
@@ -27,14 +25,19 @@
   <div class="row">
     <!-- Suchfeld und Links -->
     <div class="col-md-4 col-sm-4 col-xs-12">
+        <form type="text" action="javascript:myScroll()"> 
         <div class="input-group">
           <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH -->
           <input class="form-control" id="system-search" 
                 name="q" placeholder="Suche nach" autofocus>
-          <span class="input-group-btn">
-          <button id="searchbutton" type="button" class="btn btn-ffms"><i class="glyphicon glyphicon-search"></i></button>
-          </span>
+            <span class="input-group-btn">
+                <button type="submit" id="searchbutton" class="btn btn-ffms">                
+                    <i class="glyphicon glyphicon-search"></i>
+                </button>
+            </span>
+          </input>
         </div>
+        </form>
       <br/>
       <h4><strong><a href="map/">Gesamtkarte des Freifunk Münsterlands</a></strong></h4>
       <p><a href="https://freifunk-muensterland.de">Freifunk Münsterland</a></p>
@@ -48,7 +51,7 @@
           <thead>
             <tr>
               <th>
-                  <div style=text-align:center><h4 id="domain">Domänen</h4></div>
+                  <div style=text-align:center><h4>Domänen</h4></div>
               </th>
             </tr>
           </thead>
@@ -388,11 +391,20 @@
     </div>
   </div>
   </div>
-     <!-- Bootstrap core JavaScript
-    ================================================== -->
-     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
-    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
-    <script src="search.js"></script>
+  
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/search.js"></script>
+    <script>
+        function myScroll(my) {
+        $('html, body').animate({
+            scrollTop: $(".table").offset().top
+            }, 200);
+        }
+    </script>
+
+
+
+
 </body>
+

+ 2 - 2
ffms.css

@@ -36,6 +36,6 @@ a:link, a:visited, a:hover, a:active{
 }
 .btn-ffms:active{
     background-color:#ffd97f;
-    border:2px solid #ffb400;
-    box-shadow: 0px 0px 5px #ffb400;    
+    border:0px solid #ffd97f;
+    box-shadow: 0px 0px 10px #ffb400;    
 }

+ 23 - 12
index.html.j2

@@ -6,8 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="ffms.css">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
 	<div class="container">
@@ -27,14 +25,19 @@
   <div class="row">
     <!-- Suchfeld und Links -->
     <div class="col-md-4 col-sm-4 col-xs-12">
+        <form type="text" action="javascript:myScroll()"> 
         <div class="input-group">
           <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH -->
           <input class="form-control" id="system-search" 
                 name="q" placeholder="Suche nach" autofocus>
-          <span class="input-group-btn">
-          <button type="button" class="btn btn-ffms"><i class="glyphicon glyphicon-search"></i></button>
-          </span>
+            <span class="input-group-btn">
+                <button type="submit" id="searchbutton" class="btn btn-ffms">                
+                    <i class="glyphicon glyphicon-search"></i>
+                </button>
+            </span>
+          </input>
         </div>
+        </form>
       <br/>
       <h4><strong><a href="map/">Gesamtkarte des Freifunk Münsterlands</a></strong></h4>
       <p><a href="https://freifunk-muensterland.de">{{freifunk.name}}</a></p>
@@ -102,11 +105,19 @@
     </div>
   </div>
   </div>
-     <!-- Bootstrap core JavaScript
-    ================================================== -->
-     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
-    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
-    <script src="search.js"></script>
+  
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/search.js"></script>
+    <script>
+        function myScroll(my) {
+        $('html, body').animate({
+            scrollTop: $(".table").offset().top
+            }, 200);
+        }
+    </script>
+
+
+
+
 </body>

File diff suppressed because it is too large
+ 2377 - 0
js/bootstrap.js


File diff suppressed because it is too large
+ 7 - 0
js/bootstrap.min.js


+ 13 - 0
js/npm.js

@@ -0,0 +1,13 @@
+// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
+require('../../js/transition.js')
+require('../../js/alert.js')
+require('../../js/button.js')
+require('../../js/carousel.js')
+require('../../js/collapse.js')
+require('../../js/dropdown.js')
+require('../../js/modal.js')
+require('../../js/tooltip.js')
+require('../../js/popover.js')
+require('../../js/scrollspy.js')
+require('../../js/tab.js')
+require('../../js/affix.js')

+ 2 - 2
search.js

@@ -1,6 +1,5 @@
 $(document).ready(function() {
     var activeSystemClass = $('.list-group-item.active');
-
     //something is entered in search form
     $('#system-search').keyup( function() {
        var that = this;
@@ -42,7 +41,8 @@ $(document).ready(function() {
         {
             tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">Kein Eintrag gefunden.</td></tr>');
         }
-    });
+    });    
 });
 
+