CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dizzy49
Dizzy49

Reputation: 1520

Include Header and Footer as Separate Files Using HTML

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.

Upvotes: 0

Views: 5058

Answers (1)

dmotors
dmotors

Reputation: 631

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>

Upvotes: 2

Related Questions