commit 0595c29f1e748a39ef93fe3873df8b7e5d8c1132
parent 2a3b049ea0162515265aa22bffba761a6a362326
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Sat, 11 Apr 2020 18:23:26 -0700
Implement sticky headers in reference tables.
Diffstat:
3 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/Reference/index.html b/Reference/index.html
@@ -11,7 +11,7 @@
<script src="index.js"></script>
</head>
- <body onload="Load()">
+ <body onload="Load()" onresize="setTableHeight()">
<a id="title" href="../">Spanish-Quizzer v2.3.0</a>
<br/>
<label class="text">Reference Tables</label>
diff --git a/Reference/index.js b/Reference/index.js
@@ -3,6 +3,14 @@ var Sets; // List of parsed sets
+// Set table height
+function setTableHeight() {
+ var tableY = document.getElementById("referenceTable").offsetTop;
+ document.getElementById("referenceTable").style.height = `${window.innerHeight - tableY - 50}px`;
+}
+
+
+
// Load the document
function Load() {
// Apply dark mode
@@ -10,6 +18,9 @@ function Load() {
document.body.classList.toggle("dark");
}
+ // Set table height
+ setTableHeight();
+
// Load CSVs
Sets = [];
Papa.parse("../Vocab/Verbs.csv", {
diff --git a/Styles.css b/Styles.css
@@ -122,6 +122,12 @@ button:disabled {
max-width: fit-content;
}
+#referenceTable th {
+ position: sticky;
+ top: 0;
+ background-color: var(--hover-color);
+}
+
/******** Quizzer styles ********/
