Fix some issues with help box when resizing the window

pull/235/head
ElementalAlchemist 3 years ago committed by Mike Lang
parent b35ce32659
commit a949041ca8

@ -44,7 +44,8 @@
<video id="video" class="video-js" controls preload="auto"></video>
<a href="#" id="keyboard-help">Help</a>
<div id="keyboard-help">
<a href="#" id="keyboard-help-link">Help</a>
<div id="keyboard-help-box" class="hidden">
<h2>Keyboard Shortcuts</h2>
<ul>
@ -60,6 +61,7 @@
<li>Hyphen (-): Decrease playback speed one step</li>
</ul>
</div>
</div>
<a href="#" id="download">Download Video</a>
</body>
</html>

@ -10,7 +10,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
await loadDefaults();
updateTimeSettings();
const helpLink = document.getElementById("keyboard-help");
const helpLink = document.getElementById("keyboard-help-link");
helpLink.addEventListener("click", toggleHelpDisplay);
});
@ -54,7 +54,7 @@ function updateSegmentPlaylist() {
function toggleHelpDisplay() {
const helpBox = document.getElementById("keyboard-help-box");
if (helpBox.classList.contains("hidden")) {
const helpLink = document.getElementById("keyboard-help");
const helpLink = document.getElementById("keyboard-help-link");
helpBox.style.top = (helpLink.offsetTop + helpLink.offsetHeight) + "px";
helpBox.classList.remove("hidden");
} else {

@ -22,7 +22,12 @@
}
#keyboard-help {
z-index: 1;
}
#keyboard-help-link {
float: right;
z-index: 5;
}
#keyboard-help-box {

Loading…
Cancel
Save