How to call FOOTER and NavBar from different HTML files?

Question

I'm creating a simple Web Page wherein I want all the STATIC PARTS like NavBar and Footer of my Web Page to be on a separate HTML file.

So that everytime I create a new page, I just have to call it or link it in order to reduce my line of codes and loading time as well. How can I do it here? Please help me.

I want to do something like this:

Here's my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HACMS</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/Site.css">
    <link rel="stylesheet" type="text/css" href="css/dashboard-navbar.css">
    <link rel="stylesheet" type="text/css" href="css/footer-style.css">
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/csi.min.js"></script>
    <script type="text/javascript" src="js/csi.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script> $("#includedContent").load("sampleFooter.html"); </script> 

</head>
<body>
    <h1>THIS IS THE BODY</h1>
     <!-- THIS IS MY NAVBAR -->
        <nav class="navbar navbar-inverse navbar-fixed-top navbar-custom" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="css/images/SSILogo.png" alt="SMESoft Inc." /></a>
                </div>
               <div class="collapse navbar-collapse navbar-ex1-collapse">

                    <ul class="nav navbar-nav navbar-right navbar-user">

                        <li><a href="#" class="hvr-underline-from-center"><i class="fa fa-sign-in" aria-hidden="true"></i>&nbsp;&nbsp;Log Out</a>
                        </li>
                    </ul>
            </div>
        </nav>
        <br>
        <br>

        <!-- THIS IS MY FOOTER -->
        <footer>
         <div class="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-5  col-md-4 col-sm-4 col-xs-4">
                            <h3> Company Background </h3>
                            <p>
                                SMESoft Inc. (SSI) is a duly registered company in the Philippines Securities and Exchange Commission (SEC). Established in 2008 and registered in 2011, the company has developed its product line of Business Management Solutions for Small to Medium Enterprise.
                                Part of the company's expansion is the acquisition of authority to distribute the products and trainings of the internationally renowned RMC Project Management Inc. headquartered in Minnesota, USA. It encompasses product distribution and training conduct with RMC trademark across the country and nearby territories (subject to RMC approval).
                                Two years ago, SSI started extending an advocacy campaign to raise awareness of the Project Management discipline which the founder believes will benefit the people by applying the necessary skills and concepts for a better future.

                            </p>
                        </div>

                        <div class="col-lg-3  col-md-3 col-sm-4 col-xs-4 ">
                            <h3> Keep Connected </h3>
                            <ul class="social">
                                <li> <a href="#" class="icoFacebook"> <i class=" fa fa-facebook"></i> &nbsp;&nbsp;Like Us on Facebook</a></li>
                                <li> <a href="#" class="icoInstagram"> <i class="fa fa-instagram"></i> &nbsp;&nbsp;Follow Us on Instagram</a> </li>
                                <li> <a href="#" class="icoLinkedin"> <i class="fa fa-linkedin"></i> &nbsp;&nbsp;Follow Us on LinkedIn</a></li>
                                <li> <a href="#" class="icoPinterest"> <i class="fa fa-pinterest"></i> &nbsp;&nbsp;Follow Us on Pinterest</a></li>
                                <li> <a href="#" class="icoTwitter"> <i class="fa fa-twitter"></i> &nbsp;&nbsp;Follow Us on Twitter</a></li>
                            </ul>
                        </div>

                        <div class="col-lg-4 col-md-3 col-sm-4 col-xs-4">
                            <h3> Contact Information </h3>
                            <ul>
                                <li>
                                    <span class="fa fa-home" aria-hidden="true"></span>
                                    &nbsp;&nbsp;Unit 511-512 VGP Center,
                                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Legaspi Ayala Avenue,</p>
                                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Village Makati City </p>
                                </li>

                                <li>
                                    <span class="fa fa-mobile" aria-hidden="true"></span>
                                    &nbsp;&nbsp;+63 933.049.8890 (SMART)
                                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+63 906.297.0995 (GLOBE)</p>
                                </li>

                                <li>
                                    <span class="fa fa-phone" aria-hidden="true"></span>
                                    &nbsp;&nbsp;886-9775 | 512-5955
                                </li>

                                <li>
                                    <span class="fa fa-envelope-o" aria-hidden="true"></span>
                                    &nbsp;&nbsp;inquire@smesoft.com.ph
                                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marketing@smesoft.com.ph</p>
                                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sales@smesoft.com.ph</p>
                                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;support@smesoft.com.ph</p>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <!--/.row-->
                </div>
                <!--/.container-->
            </div>
            <!--/.footer-->

            <div class="footer-bottom">
                <div class="container">
                    <center><p>&copy; 2016 SMESoft Inc. All Rights Reserved</p></center>
                </div>
            </div>
        </footer>
</body>
</html>

Possible duplicate of [Include another HTML file in a HTML file](http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — matthiasunt, Aug 31 '16 at 07:58
Pinoy? You can do it using javascript. The logic is similar to blading in laravel or routing in angularJS. It's easy to create routing in javascript or maybe just use a library. — hdotluna, Aug 31 '16 at 08:10
@HermLuna Yes Man. But I'm not familiar with laravel. How can I do that in javascript? — Jaycee Evangelista, Aug 31 '16 at 08:12
Use ajax request. Store the return data into cache and get the responseText then append to body. That's the main logic. — hdotluna, Aug 31 '16 at 08:15
@JayceeEvangelista check http://api.jquery.com/load/ the load function of jquery will do the trick — Zenel Rrushi, Aug 31 '16 at 08:19

hdotluna · Answer 1 · 2016-08-31T08:59:31.707

1

footer.html / save inside the partial folder

Gawa ka ng partial na folder. Doon mo i-save ang footer.html

<footer>This is a footer</footer>

JS (put this on the desired page)

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
    if (xhttp.readyState == 4 && xhttp.status == 200){
        document.body.innerHTML += xhttp.responseText; // you can change the target. As long as you append xhttp.responseText. It will work fine.
    }
};
xhttp.open('GET', 'partial/footer.html', true); // note: link the footer.html
xhttp.send();

Example: Assuming you're on your index.html

Just put the JS code to your index.

<body>
    <script>
        var xhttp = new ....
    </script>
</body>

This is the basic without caching. You will need caching if you wish to create routing. Tested. Cheers. Hope it helps.

edited Aug 31 '16 at 08:59

answered Aug 31 '16 at 08:24

hdotluna

5,514
4
20
31

where should I call this JS file? Do I have to put an ID or class in my footer? – Jaycee Evangelista Aug 31 '16 at 08:48
Wait lang tol. I'll re-edit my answer for better guide. – hdotluna Aug 31 '16 at 08:56
Try mo na ulit. Haha. Tagalog na. Nosebleed na ko e. Sumasabay lang sa agos ng SO. Haha. – hdotluna Aug 31 '16 at 09:01
bro hindi gumagana sakin? Bakit ganun? – Jaycee Evangelista Aug 31 '16 at 09:27
Ngeeee. Tinesting ko yan e. Tingnan mo console kung may error. Baka may mali sa pagkagawa mo. Pwede ba dito mag send file? Sendan nalang kita. – hdotluna Aug 31 '16 at 09:29
email nalang bro? – Jaycee Evangelista Aug 31 '16 at 09:31
Ano email mo? Baka naman wala ka server kaya di gumagana ang http request. Pakibilis tol kasi mag a-out na ko e. Di na kita matutulongan pag out ko. Busy din e – hdotluna Aug 31 '16 at 09:35

wazz · Answer 2 · 2016-08-31T08:39:34.687

0

the part that says $("#includedContent") refers to an ID on the page.

so the footer should have id="includedContent". then 'load()' will put content from sampleFooter.html into that ID.

edited Aug 31 '16 at 08:39

answered Aug 31 '16 at 08:17

wazz

4,953
5
20
34

in my footer i put an id="footer" but doesn't seem to affect my page. – Jaycee Evangelista Aug 31 '16 at 08:31
my mistake. it should be id="includedContent". the # in `$("#includedContent")` refers to an ID. hope that works. (answer edited.) – wazz Aug 31 '16 at 08:35
I code it like this :

but still I wasn't able to call the sampleFooter.html – Jaycee Evangelista Aug 31 '16 at 08:43
dang. looks like there are some possible issues shown here: http://stackoverflow.com/questions/19370417/how-to-load-external-html-into-a-div and just for reference: https://api.jquery.com/load/ – wazz Aug 31 '16 at 08:59
also, just to check, `sampleFooter.html` should be in the same folder as the main page shown above. (doesn't have to be, it's just how you wrote it.) – wazz Aug 31 '16 at 09:01

How to call FOOTER and NavBar from different HTML files?

2 Answers2