diff options
Diffstat (limited to 'scripts')
| -rw-r--r-- | scripts/onload.js | 11 | ||||
| -rw-r--r-- | scripts/scroll.js | 12 | ||||
| -rw-r--r-- | scripts/video.js | 16 |
3 files changed, 32 insertions, 7 deletions
diff --git a/scripts/onload.js b/scripts/onload.js index 5c63f35..165f80d 100644 --- a/scripts/onload.js +++ b/scripts/onload.js @@ -3,6 +3,13 @@ function addNodes() { const container = document.getElementById("progressContainer"); for (var i = 0; i < collection.length; i++) { - container.innerHTML += "<nodes class=\"sidebar-progress-node\"></nodes>\n"; + var node = document.createElement("a"); + node.className = "node"; + container.appendChild(node); + if (collection.item(i).getAttribute('id') == null) { + collection.item(i).setAttribute('id', `section-${i}`); + } + node.setAttribute('id', `node-${i}`) + node.href = `#${collection.item(i).getAttribute('id')}` } -}
\ No newline at end of file +} diff --git a/scripts/scroll.js b/scripts/scroll.js index b7a6fa0..6c20890 100644 --- a/scripts/scroll.js +++ b/scripts/scroll.js @@ -5,17 +5,19 @@ document.addEventListener('scroll', function () { function progress() { const sections = document.getElementsByTagName("section"); - const nodes = document.getElementsByTagName("nodes"); + const nodes = document.getElementsByClassName("node"); if (nodes[0]) { for (var i = 0; i < sections.length; i++) { if (isInViewport(sections[i])) { - nodes[i].style.width = "20px"; - nodes[i].style.height = "20px"; + nodes[i].style.width = "22px"; + nodes[i].style.height = "22px"; + nodes[i].style.backgroundColor = "black"; } else { - nodes[i].style.width = "10px"; - nodes[i].style.height = "10px"; + nodes[i].style.width = "13px"; + nodes[i].style.height = "13px"; + nodes[i].style.backgroundColor = "#555"; } } } diff --git a/scripts/video.js b/scripts/video.js new file mode 100644 index 0000000..e1d5948 --- /dev/null +++ b/scripts/video.js @@ -0,0 +1,16 @@ +function playVideo(elementId) { + var element = document.getElementById(elementId); + + element.style.visibility = "visible"; + element.style.opacity = "100%"; + element.play(); +} + +function stopVideo(elementId) { + var element = document.getElementById(elementId); + + element.style.visibility = "hidden"; + element.style.opacity = "0%"; + element.pause(); + element.currentTime = 0; +} |