title: Include Header and Footer as Separate Files Using HTML
body: <p>I am replacing several hundred PDFs and MS Word reference docs that are very poorly linked/indexed.  Ideally I want to create a self contained HTML version.  Ideally it would be hosted, but it's possible some people will just copy it to a flash drive for reference.</p>
  
  <p>I confirmed what I have works with MAMP, but is there a way do it it without requiring the user to install something if the just want to use the local files?</p>
  
  <p>I have a simple header and footer files.</p>
  
  <p>header.html</p>
  
  <pre><code>&lt;div style="text-align: right; width: 90%; border-bottom: solid black 3px;"&gt;
      &lt;img src="img/logo_75x75.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>footer.html</p>
  
  <pre><code>&lt;div style="text-align: center; height: 50px; position: relative; border: 1px solid black;"&gt;
      &lt;img src="img/image.jpg"&gt;&lt;span style="margin-left: 150px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);"&gt;SOMETEXT&lt;span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using the method from <a href="https://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages">This Stackoverflow Article</a> and have the following test.html file.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt; 
              $(function(){
                  $("#headerDiv").load("header.html");
                  $("#footerDiv").load("footer.html");
              });  
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="headerDiv"&gt;&lt;/div&gt;
          &lt;div id="footerDiv"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It doesn't work.  Nothing is displayed.  I've tried just the header in the function, and just the footer in the function and that didn't help either.</p>
  
  <p>I'm not sure what I' missing here.</p>