Jump to content
EdwinE

Same header on all pages

Recommended Posts

Hi, I'm an absolute beginner 🙂
I have this header that I would like to have on all my pages, iframe not, the link starts in a new iframe.
Include I can't make it work, I've tried this,
https://www.w3schools.com/howto/howto_html_include.asp
but can't make it work.

Header:

<!DOCTYPE html>
<html lang="dk">
<head>
<title>Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<style>
</style>
</head>
<body>

  <!-- Top menu -->
  <header class="w3-top">
    <div class="w3-white w3-xlarge" style="margin:auto">

      <div class="w3-padding-16 w3-left" style="margin-left: 10px;">
        <a href="index.html" class="logo">
          <img src="Billeder/Logo/logo_ny.png" alt="logo" height="80" width="220" >
        </a>
       </div>

       <div class="w3-right w3-padding-16">
        <a href="index.html">
         <ul class="w3-ul">
          <li class="w3-xxlarge"><i class="fa fa-home"></i></li>
         </ul>
        </a>
       </div>

      <div class="w3-center w3-padding-16">
        <h2 style="font-size: 25px; font-weight: bold;">Hvad vi kan bidrage med.</h2>
        <p style="font-size: 10px;">Siden er under opbygning, vi koder alt selv i "rå" Html,css.
          <br />
          Ikke optimeret for Mobil og tablet endnu.
        </p>
      </div>
    </div>
  </header>


</body>
</html>


Page:

<!DOCTYPE html>
<html lang="dk">
<head>
<title>Elowsson</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="w3.css">
<meta charset="utf-8">
<style>
</style>

</head>

<body>

<!-- Top menu -->
<!-- <header class="w3-top"> -->
  <!-- <iframe src="Header.html" style= "border:none;" width="100%">
       <p>Your browser does not support iframes.</p>
  </iframe> -->
<!-- </header> -->

<div class="w3-main w3-container">
 <div class="w3-bar w3-black">
  <a href="lasersk.html"  target="_parent" class="w3-bar-item w3-hover-green">Laserskære</a>
  <a href="3DPrinter.html"  target="_parent" class="w3-bar-item w3-hover-green">3D Printer</a>
  <a href="LeicaBLK360.html"  target="_parent" class="w3-bar-item w3-hover-green">Leica BLK360</a>
  <a href="Drone.html"  target="_parent" class="w3-bar-item w3-hover-green">Drone</a>
  <a href="Fusion360.html"  target="_parent" class="w3-bar-item w3-hover-green">Fusion 360</a>
  <a href="Autocad.html"  target="_parent" class="w3-bar-item w3-hover-green">Autocad</a>
  <a href="SolidW.html"  target="_parent" class="w3-bar-item w3-hover-green">Solid Work</a>
  <a href="Marstercam.html"  target="_parent" class="w3-bar-item w3-hover-green">MasterCam</a>
  <a href="VRBriller.html"  target="_parent" class="w3-bar-item w3-hover-green">VR Briller</a>
  <a href="TDyr.html"  target="_parent" class="w3-bar-item w3-hover-green">Trædyr/Træting</a>
 </div>
</div>

<br>

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</footer>

</body>
</html>

Edwin

Share this post


Link to post
Share on other sites

I'd be more interested in throwing away the iframe idea (I'm quite biased against iframes) and going back to the include and finding out what was wrong with that.

What happened with the w3 include, it obviously works in the example.

  • Thanks 1

Share this post


Link to post
Share on other sites
9 hours ago, Funce said:

I'd be more interested in throwing away the iframe idea (I'm quite biased against iframes) and going back to the include and finding out what was wrong with that.

What happened with the w3 include, it obviously works in the example.

I can't make it work 🙂

<!DOCTYPE html>
<html lang="dk">
<head>
<title>Test Elowsson</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="w3.css">

<meta charset="utf-8">
<style>
</style>


<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;
    /*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>

<body>

  <div w3-include-html="header.html"></div>
      <script>
        includeHTML();
      </script>

<div class="w3-main w3-container">
 <div class="w3-bar w3-black">
  <a href="lasersk.html"  target="_parent" class="w3-bar-item w3-hover-green">Laserskære</a>
  <a href="#" class="w3-bar-item w3-hover-green">Paris</a>
  <a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
 </div>
</div>

<br>

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</footer>

</body>
</html>

 

<!DOCTYPE html>
<html lang="dk">
<head>
<title>Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<style>
</style>
</head>
<body>

  <!-- Top menu -->
  <header class="w3-top">
    <div class="w3-white w3-xlarge" style="margin:auto">

      <div class="w3-padding-16 w3-left" style="margin-left: 10px;">
        <a href="index.html" class="logo">
          <img src="Billeder/Logo/logo_ny.png" alt="logo" height="80" width="220" >
        </a>
       </div>

       <div class="w3-right w3-padding-16">
        <a href="index.html">
         <ul class="w3-ul">
          <li class="w3-xxlarge"><i class="fa fa-home"></i></li>
         </ul>
        </a>
       </div>

      <div class="w3-center w3-padding-16">
        <h2 style="font-size: 25px; font-weight: bold;">Hvad vi kan bidrage med.</h2>
        <p style="font-size: 10px;">Siden er under opbygning, vi koder alt selv i "rå" Html,css.
          <br />
          Ikke optimeret for Mobil og tablet endnu.
        </p>
      </div>
    </div>
  </header>


</body>
</html>

Share this post


Link to post
Share on other sites

The page is read from top to bottom, if you cal a function that references a specific element in JavaScript before the reading of page reaches it, too JavaScript it does not exist! that is why in the tutorial it says 

Quote

Call includeHTML() at the bottom of the page:

Also you just require html content that you want to include, NOT doctype, head, html or body tags.

Edited by dsonesuk
  • Thanks 1

Share this post


Link to post
Share on other sites

You did copy all links to fonts, css, javascript in the main page from header content? Also make the links to 'https://' links start with '//' instead, it may problem with non secure http working with https secure pages.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

It won't work if you run the HTML file from your desktop because browser security settings prevent AJAX requests from local files. You have to test this in a server environment.

Share this post


Link to post
Share on other sites
16 hours ago, dsonesuk said:

You did copy all links to fonts, css, javascript in the main page from header content? Also make the links to 'https://' links start with '//' instead, it may problem with non secure http working with https secure pages.

Thanks for the suggestion, tried it, but then the page would not appear at all, nothing came up.

Share this post


Link to post
Share on other sites
13 hours ago, Ingolme said:

It won't work if you run the HTML file from your desktop because browser security settings prevent AJAX requests from local files. You have to test this in a server environment.

I'll try that

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...