Include Header and Footer as Separate Files Using HTML

Question

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.

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?

I have a simple header and footer files.

header.html

<div style="text-align: right; width: 90%; border-bottom: solid black 3px;">
    <img src="img/logo_75x75.png">
</div>

footer.html

<div style="text-align: center; height: 50px; position: relative; border: 1px solid black;">
    <img src="img/image.jpg"><span style="margin-left: 150px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);">SOMETEXT<span>
</div>

I'm using the method from This Stackoverflow Article and have the following test.html file.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script> 
            $(function(){
                $("#headerDiv").load("header.html");
                $("#footerDiv").load("footer.html");
            });  
        </script>
    </head>

    <body>
        <div id="headerDiv"></div>
        <div id="footerDiv"></div>
    </body>
</html>

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.

I'm not sure what I' missing here.

You're not running this locally without a wamp/mamp http server are you? Only other thing I can think of going on. — dmotors, Aug 10 '18 at 00:52
Yes, I am running on my local machine without any kind of web server wamp/mamp. Ideally the final product would be hosted, but there is a good chance that some people will just have it on a flash drive for reference. It is a part of a series of reference documents, I'm replacing a couple hundred MS Word documents that are poorly linked/indexed with a HTML version. The header and footer may change over time, and I don't want to have to change 100 files, just two. — Dizzy49, Aug 10 '18 at 04:42
If that is your purpose and not always on a server then you can use object inside your div to achieve this and still run locally. It's not ideal but since that is your request it is possible. I'll update my answer to include that. — dmotors, Aug 10 '18 at 16:12

dmotors · Accepted Answer · 2018-08-10T16:23:47.133

2

Make sure you are trying to run this on a local wamp/mamp/lamp or online such as a hosted web server via FTP for starters.

It runs fine on my local server because it does have that setup.

When I throw this for example to my desktop or some random folder it will be blank for sure.

HOWEVER, that being said, you did state it may not always be ran on a web server and users could possibly store in flash drives and load like that. You can use the object way to achieve this. It's not the best for most production uses but it does fulfill your requirements.

Remove your jQuery function and modify your body to include the object inside your div. Here's the resulting code:

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <div id="headerDiv"><object type="text/html" data="header.html" style="overflow:auto; width: 100%; height: 100%;"></object></div>
        <div id="footerDiv"><object type="text/html" data="footer.html" style="overflow:auto; width: 100%; height: 100%"></object></div>
    </body>
</html>

edited Aug 10 '18 at 16:23

answered Aug 10 '18 at 00:27

dmotors

611
2
7
19

I created a test.html, and it is not working. I updated the HTML above. – Dizzy49 Aug 10 '18 at 00:32
1

@Dizzy49 Worked on my local. I simulated here check if it looks like how your files and setup is: http://plnkr.co/edit/FgztgDiTLkiiTwufS0I0?p=preview Also open up your browser dev tools and look at the console, is there any errors? Make sure the all the files are in the same folder and if not specify the path correctly. – dmotors Aug 10 '18 at 00:37
Yes, it worked! :D The header and footer no longer use the css from index file. If I move the CSS into the header and footer files it works. Not a huge issue, just found it odd. I like to keep my css in one place if possible. – Dizzy49 Aug 11 '18 at 08:20
Is it possible to have the html determine if it's hosted or not and use the jQuery if it is, and the object if it isn't? – Dizzy49 Aug 15 '18 at 18:03
So you are trying to use jQuery to display the external files still if hosted or are you just simply trying to use jQuery for other features? – dmotors Aug 15 '18 at 18:13
Only using the jQuery to include the external files. I guess I can use Object all the time, but I was trying to get the best of both :D – Dizzy49 Aug 15 '18 at 18:18

Include Header and Footer as Separate Files Using HTML

1 Answers1