[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]
[tor-commits] [nyx/master] Keep focus at top for page anchors
commit 8c721398b4d64fe20ab9a924966642ed2613ebb5
Author: Damian Johnson <atagar@xxxxxxxxxxxxxx>
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>
_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits