Jump to content

Same header on all pages

EdwinE

By EdwinE
in General

 Share

Recommended Posts

EdwinE Newbie

EdwinE

Posted
Posted

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

Link to comment
Share on other sites
Funce Invested Member

Funce

Posted
Posted

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
Link to comment
Share on other sites
EdwinE Newbie

EdwinE

Posted
  • Author
Posted
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>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

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
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

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.

Link to comment
Share on other sites
EdwinE Newbie

EdwinE

Posted
  • Author
Posted
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.

Link to comment
Share on other sites
EdwinE Newbie

EdwinE

Posted
  • Author
Posted
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

Link to comment
Share on other sites
  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...