[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]
[tor-commits] [nyx/master] Implify handling when JS is disabled
commit 234119226aced7b86955c41cd6b40820f49c86e8
Author: Damian Johnson <atagar@xxxxxxxxxxxxxx>
Date: Fri Aug 4 12:43:43 2017 -0700
Implify handling when JS is disabled
Using the same nav for both, and just adjusting the links when javascript is
enabled. Also moving non-js styling to a file.
---
web/index.html | 40 ++++++++++++++--------------------------
web/styles_no_js.css | 12 ++++++++++++
2 files changed, 26 insertions(+), 26 deletions(-)
diff --git a/web/index.html b/web/index.html
index be2286d..51be751 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,21 +6,10 @@
<title>Nyx</title>
<link rel="shortcut icon" href="images/favicon.png"/>
<link rel="stylesheet" type="text/css" href="styles.css" />
+ <noscript><link rel="stylesheet" type="text/css" href="styles_no_js.css"></noscript>
<!-- jQueryTools 1.2.6 (https://jquerytools.github.io/download/), copied July 24, 2017 -->
- <script src="jquery.tools.min.js"></script>
-
- <noscript>
- <style>
-#js_nav {
- display: none;
-}
-
-#faq_section {
- display: none;
-}
- </style>
- </noscript>
+ <script src="jquery.tools.min.js" type="text/javascript"></script>
</head>
<body>
@@ -28,19 +17,11 @@
<div class="header-body">
<span id="logo"></span>
<div class="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 class="tabs nav">
+ <li><a id="t1" href="#home_section">What Is It?</a></li>
+ <li><a id="t2" href="#faq_section">FAQ</a></li>
+ <li><a id="t3" href="#download_section">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>
@@ -395,10 +376,17 @@ sudo python setup.py install</pre><br /></li>
</div>
</div>
- <script>
+ <script type="text/javascript">
$(function() {
$(".tabs").tabs(".page", { history: true });
+ // when javascript is enabled change nav anchors so they're both shorter
+ // and don't move focus
+
+ document.getElementById("t1").href = "#home";
+ document.getElementById("t2").href = "#faq";
+ document.getElementById("t3").href = "#download";
+
// show/hide for FAQ questions
var toggleFaq = function(answer) {
diff --git a/web/styles_no_js.css b/web/styles_no_js.css
new file mode 100644
index 0000000..d7b03f3
--- /dev/null
+++ b/web/styles_no_js.css
@@ -0,0 +1,12 @@
+/*============================================================
+Attributes when javascript is disabled
+============================================================*/
+
+#t2 {
+ display: none;
+}
+
+#faq_section {
+ display: none;
+}
+
_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits