CODEWITHSUNDEEP
javascripthtml
Nick0989
Nick0989

Reputation: 459

Is there a way to update one html element that updates across all documents?

Let's say I have an index.html page with a nav menu and I have 15 other html pages with the exact same menu.

Is it possible with html/css/js to update ONE file (say the index.html file), and all the updates are applied throughout all 15 documents?

I know you can do this with PHP but the page that I'm running doesn't use a PHP index file so I'm looking for another way.

Perhaps there's some other way to achieve this? Angular JS maybe? Any suggestions or links you can suggest to read/learn how to do this?

Upvotes: 4

Views: 3627

Answers (6)

keithpjolley
keithpjolley

Reputation: 2263

Yes - it's possible and a requirement for any kind of non-trivial sized site.

The general way of doing such things without getting too sophisticated is this. In your HTML files you include some templates. Those templates control the general look and feel of your site. All of your HTML files include the same templates. If you want something different on a particular page you override your templates in that particular html file.

It ends up looking like this:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="/include/css/style.css">
</head>

<body>
  <div>
    my content in here.
  </div>
  <script type="text/javascript" src="/include/js/custom.js"></script>
</body>
</html>

In your style.css and your custom.js you can go to town customizing. You can add more stylesheets and more javascript scripts as needed. Most sites have more style and javascript than content. A lot more.

My favorite site to learn about these technologies is the Mozilla Developer Network, but there are plenty of other great resources too.

Upvotes: 1

PKCS12
PKCS12

Reputation: 454

Try this:

    <div id="sideBar">
       <!-- every page needs to have this -->
    </div>
    <div id ="content">
    </div>

    <script>
    document.getElementById("sideBar").innerHTML='<object type="text/html" data="side.html" ></object>';

</script>

Can you use JQuery? :D

Example Page 1:

<div id="sideBar">
   <!-- every page needs to have this -->
</div>
<div id ="content">
</div>

<script>
$(document).ready( function() {
    $("#sideBar").load("side_content.html");
});
</script>

Upvotes: 1

Sangsom
Sangsom

Reputation: 437

Include that nav as a snippet through all the pages, so eventually you will update one file and all the other pages will have these updates too. Check for more https://www.w3schools.com/howto/howto_html_include.asp

Upvotes: 1

Negi Rox
Negi Rox

Reputation: 3922

you can do it by XML http request... you just need to define all navigation header,menu in one file and refer with one div in all pages... 

<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("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("include-html");
      includeHTML();
    }
  }      
  xhttp.open("GET", file, true);
  xhttp.send();
  /*exit the function:*/
  return;
  }
 }
};


<script>
includeHTML();
</script>

</body>
</html>

Upvotes: 1

Limbo
Limbo

Reputation: 2290

Synchronizing tabs is available through localStorage and the StorageEvent. More info you can find on MDN

Once your nav is updated, you are calling localStorage.setItem(someKey, someValue), and with the window.addEventListener('storage', this.handleStorageEvent) handling the change of the localStorage on other tabs. Tab on which the event was fired will not propagate the change of localStorage.

Hope my answer helped :3

Upvotes: 2

Scoots
Scoots

Reputation: 3102

To do this JUST with HTML, you could use an iframe, with <a target="_parent">:

nav.html

<ul>
    <li><a href="/" target="_parent">Home</a></li>
    <li><a href="/about.html" target="_parent">About</a></li>
</ul>

And then include that in places with

<iframe src="/nav.html"></iframe>

Remember that the contents of an iframe should still be a valid HTML document, so you'll want a doctype, a head, a body, and CSS includes in nav.html too. Iframes also typically come with some default border and padding styles you'll need to get rid of.

However I would be amiss if I didn't say that the typical way of actually accomplishing this is by using a server side language such as PHP to dynamically build the menu on each page.

Upvotes: 1

Related Questions