Welcome

.

Using HTML Include for site navigation links

by

Questions › Using HTML Include for site navigation links
0
Vote Up
Vote Down
Garmaine asked 4 years ago

I'm trying to create a simple off-line site (shared through Dropbox) that will serve as a knowledge base for my team. I'd like a way to pull the side bar site navigation links from one file since we'll have team members constantly updating it and don't want to have them updating them across dozens of pages.

I'm seeing the HTML include solution could work but I can't get it to work, I’m testing with a simple hyperlink in my navigation file:

<a href="new_pg.html">How to Add a New Page</a>

Any ideas what I'm doing wrong?

<!DOCTYPE html>
<html>
<script>
function includeHTML() {
  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 atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    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;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>

<body>

<div class="sidenav">
<div class="nav-divider-line"></div>

<div w3-include-html="navigation.html"></div> 

<script>
includeHTML();
</script>


<div class="nav-divider-line"></div>
  
  
</div>

<div class="main">
Main Content
</div>


<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}
</script>


</body>
</html>