[tor-commits] [nyx/master] Keep focus at top for page anchors

[atagar at torproject.org]

commit 8c721398b4d64fe20ab9a924966642ed2613ebb5
Author: Damian Johnson <atagar at torproject.org>
Date:   Wed Aug 2 10:27:47 2017 -0700

    Keep focus at top for page anchors
    
    Our nav links work in different ways based on if the visitor has javascript or
    not.
    
      * When the visitor has JS the nav link targets determine the anchor that
        appears in the url bar, but does *not* care about the id in the page div.
        For JS users using short names (#home, #faq, or #download).
    
        These mismatch the div ids so focus doesn't drop from the top of the page.
    
      * When visitors lack JS all pages are visible and the nav links drop focus to
        the respective page div. In this case the link needs to match the div id,
        and uses longer ids (#home_section or #download_section).
---
 web/index.html | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/web/index.html b/web/index.html
index 021a074..347156a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -10,14 +10,13 @@
     <!-- jQueryTools 1.2.6 (https://jquerytools.github.io/download/), copied July 24, 2017 -->
     <script src="jquery.tools.min.js"></script>
 
-    <!-- hide faq since it doesn't work without JS -->
     <noscript>
       <style>
-#t2 {
+#js_nav {
   display: none;
 }
 
-#faq {
+#faq_section {
   display: none;
 }
       </style>
@@ -29,16 +28,24 @@
       <div class="header-body">
         <span id="logo"></span>
         <div class="nav">
-          <ul class="tabs nav">
+          <ul class="tabs nav" id="js_nav">
             <li><a id="t1" href="#home">What Is It?</a></li>
             <li><a id="t2" href="#faq">FAQ</a></li>
             <li><a id="t3" href="#download">Download</a></li>
           </ul>
+
+          <noscript>
+            <!-- hide faq since it doesn't work without JS -->
+            <ul class="tabs nav">
+              <li><a href="#home_section">What Is It?</a></li>
+              <li><a href="#download_section">Download</a></li>
+            </ul>
+          </noscript>
         </div>
       </div>
     </div>
 
-    <div id="home" class="page">
+    <div id="home_section" class="page">
       <div id="welcome" class="section"></div>
       <a href="#welcome" class="section-title">Welcome to Nyx</a>
 
@@ -99,7 +106,7 @@
       </div>
     </div>
 
-    <div id="faq" class="page">
+    <div id="faq_section" class="page">
       <div class="section"></div>
       <a href="#faq" class="section-title">Fact & Question</a>
       <br /><br />
@@ -311,7 +318,7 @@ sudo python setup.py install</pre><br /></li>
       </ul>
     </div>
 
-    <div id="download" class="page">
+    <div id="download_section" class="page">
       <div class="section"></div>
       <a href="#download" class="section-title">Download</a>