changeset 51:40cbddf42ce4 kai

Repair download tabs.
author Kai T. Ohlhus <k.ohlhus@gmail.com>
date Wed, 28 Sep 2016 21:51:37 +0200
parents 1810308dba49
children 8e3e299baf5e
files _includes/footer.html _includes/install.html css/octave.css
diffstat 3 files changed, 98 insertions(+), 26 deletions(-) [+]
line wrap: on
line diff
--- a/_includes/footer.html	Wed Sep 28 11:30:27 2016 +0200
+++ b/_includes/footer.html	Wed Sep 28 21:51:37 2016 +0200
@@ -13,4 +13,18 @@
     x.className = "topnav";
   }
 }
+
+function openCity(evt, cityName) {
+  var i, tabcontent, tablinks;
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+  }
+  tablinks = document.getElementsByClassName("tablinks");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+  document.getElementById(cityName).style.display = "block";
+  evt.currentTarget.className += " active";
+}
 </script>
--- a/_includes/install.html	Wed Sep 28 11:30:27 2016 +0200
+++ b/_includes/install.html	Wed Sep 28 21:51:37 2016 +0200
@@ -1,12 +1,24 @@
-<ul class="tabs" data-tab>
-  <li class="tab-title"><a href="#source">Source</a></li>
-  <li class="tab-title active"><a href="#linux">GNU/Linux</a></li>
-  <li class="tab-title"><a href="#mac">Mac</a></li>
-  <li class="tab-title"><a href="#bsd">BSD</a></li>
-  <li class="tab-title"><a href="#windows">Windows</a></li>
+<ul class="tab">
+  <li><a href="javascript:void(0);" class="tablinks" onclick="openCity(event, 'Source')">Source</a></li>
+  <li><a href="javascript:void(0);" class="tablinks" onclick="openCity(event, 'GNU/Linux')">GNU/Linux</a></li>
+  <li><a href="javascript:void(0);" class="tablinks" onclick="openCity(event, 'Mac')">Mac</a></li>
+  <li><a href="javascript:void(0);" class="tablinks" onclick="openCity(event, 'BSD')">BSD</a></li>
+  <li><a href="javascript:void(0);" class="tablinks" onclick="openCity(event, 'Windows')">Windows</a></li>
 </ul>
-<div class="tabs-content">
-  <div class="content active" id="linux">
+
+<div id="Source" class="tabcontent">
+  <p>
+    The latest released version of Octave is always available from
+    <a href="ftp://ftp.gnu.org/gnu/octave">ftp://ftp.gnu.org/gnu/octave</a>.
+  </p>
+  <p>
+    If you are interested in working with the latest version of the
+    Octave sources, check out
+    the <a href="get-involved.html">resources for developers</a>.
+  </p>
+</div>
+
+<div id="GNU/Linux" class="tabcontent">
   <p>
     Executable versions of Octave for GNU/Linux systems are provided
     by the individual distributions.  Distributions known to package
@@ -19,15 +31,17 @@
     distribution varies.  The Octave project has no control over that
     process.
   </p>
-  </div>
-  <div class="content" id="mac">
+</div>
+
+<div id="Mac" class="tabcontent">
   <p>
     The Wiki has some instructions for
     <a href="http://wiki.octave.org/Octave_for_MacOS_X">installing
     Octave on OS X systems</a>.
   </p>
-  </div>
-  <div class="content" id="bsd">
+</div>
+
+<div id="BSD" class="tabcontent">
   <p>
     Executable versions of Octave for BSD systems are provided
     by the individual distributions.
@@ -38,22 +52,11 @@
     for a particular GNU/Linux distribution varies.  The Octave
     project has no control over that process.
   </p>
-  </div>
-  <div class="content" id="windows">
+</div>
+
+<div id="Windows" class="tabcontent">
   <p>
     Windows binaries with corresponding source code can be downloaded from
     <a href="https://ftp.gnu.org/gnu/octave/windows/">https://ftp.gnu.org/gnu/octave/windows/</a>
   </p>
-  </div>
-  <div class="content" id="source">
-  <p>
-    The latest released version of Octave is always available
-    from <a href="ftp://ftp.gnu.org/gnu/octave">ftp://ftp.gnu.org/gnu/octave</a>.
-  </p>
-  <p>
-    If you are interested in working with the latest version of the
-    Octave sources, check out
-    the <a href="get-involved.html">resources for developers</a>.
-  </p>
-  </div>
 </div>
--- a/css/octave.css	Wed Sep 28 11:30:27 2016 +0200
+++ b/css/octave.css	Wed Sep 28 21:51:37 2016 +0200
@@ -193,3 +193,58 @@
     margin-right: 10%;
   }
 }
+
+ul.tab {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #0790c0;
+}
+
+ul.tab li {
+  float: left;
+}
+
+ul.tab li a {
+  display: inline-block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  transition: 0.3s;
+  font-size: 20px;
+}
+
+ul.tab li a:hover {
+  background-color: #555;
+}
+
+ul.tab li a:focus, .active {
+  background-color: #555;
+}
+
+.tabcontent {
+  display: none;
+  padding: 6px 12px;
+  -webkit-animation: fadeEffect 1s;
+  animation: fadeEffect 1s;
+}
+
+@-webkit-keyframes fadeEffect {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeEffect {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}