From aa91acb5a17c67ed929a5dd5440195736745450d Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Mon, 2 Oct 2023 14:10:56 +0800 Subject: make navBar(header) presist active depending on which page user's on --- src/js/includeheader.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/js/includeheader.js (limited to 'src/js/includeheader.js') diff --git a/src/js/includeheader.js b/src/js/includeheader.js new file mode 100644 index 00000000..5ac7d067 --- /dev/null +++ b/src/js/includeheader.js @@ -0,0 +1,47 @@ +function includeHeader() { + var z, i, elmnt, file, xhttp; + // loop through a collection of all HTML elements + z = document.getElementsByTagName("*"); + for (i = 0; i < z.length; i++) { + elmnt = z[i]; + // search for elements with a certain attribute + file = elmnt.getAttribute("include-header"); + if (file) { + // make an HTTP request using the attribute value as the file name + xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4) { + if (this.status == 200) { + elmnt.innerHTML = this.responseText; + setActiveLink(); // Set the active link after including the HTML + } + if (this.status == 404) { + elmnt.innerHTML = "Page not found."; + } + // remove the attribute and call this function once more + elmnt.removeAttribute("include-header"); + includeHeader(); + } + }; + xhttp.open("GET", file, true); + xhttp.send(); + // exit the function + return; + } + } +} + +// Set the active link based on the current page +function setActiveLink() { + var currentPath = window.location.pathname; + var navLinks = document.getElementsByClassName("navBar")[0].getElementsByTagName("a"); + for (var i = 0; i < navLinks.length; i++) { + var link = navLinks[i]; + var href = link.getAttribute("href"); + if (href === currentPath) { + link.classList.add("active"); + } else { + link.classList.remove("active"); + } + } +} -- cgit v1.2.3