0

I'm trying to use the same header for multiple .html files. I'm following this thread and some others, but it doesn't seem to be working.

The header isn't showing on the vba.html page.

navBarTest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="D:\Batman\Documents\- Programming\Bootstrap - v3.3.7\css\bootstrap.css">
    <style type="text/css">
    /* Custom CSS goes in here, to override the Bootstrap CSS if you want */
</style>
<title>Navbar test</title>
</head>
<body>
    <div id="nav-placeholder"></div>

    <script  src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="D:\Batman\Documents\- Programming\Bootstrap - v3.3.7\js\bootstrap.min.js"></script>

    <script>
        $("#nav-placeholder").load("navBar.html");
    </script>

</body>
</html>

I'm expecting the NavBar to show up where <div id="nav-placeholder"></div> is.

navBar.html

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#"><i class="fa fa-home" area-hidden="true"></i>EtKC</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="about.html">About <span class="sr-only">(current)</span></a></li>
                <li><a href="mailto:myemail@gmail.com">Contact</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Topics <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="vba.html">VBA</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
BruceWayne
  • 22,923
  • 15
  • 65
  • 110
  • `href="D:\Batman` best not to hardcode local file paths, if you want this to be usable anywhere but on your own computer. – Daniel Beck Nov 04 '17 at 17:57
  • @DanielBeck - for now, I'm just doing local files to learn how to do all of this. When I take it to the "real internet", I'll replace all the local file designations. For now though, the local file paths should work though ,yeah? – BruceWayne Nov 04 '17 at 18:07
  • Probably not, for your purposes; anything that depends on AJAX calls (like the injected navbar you're attempting) is going to require being run from an actual web server. Localhost is fine, but in-browser code can't access `file://` urls. – Daniel Beck Nov 04 '17 at 18:21
  • @DanielBeck hmm okay, I'll switch out those bootstrap refs to the online CDN (?) ones – BruceWayne Nov 04 '17 at 18:23
  • @DanielBeck - I replaced the local links with the CDN, and still nothing happens on the page. I don't see anything :( – BruceWayne Nov 04 '17 at 22:03

3 Answers3

0

You can load same nav bar in each *.html file through jquery. just you need to add a header tag in your html files and assign id or class to the header, what ever suits you the best, and then in a separate JAVASCRIPT File include "nav bar code" that needs to be loaded in header of html files. Example:

*.html

<header id="header"></header>

**JAVASCRIPT FILE:**
function navbar()
{
var navbar = "<nav>your navbar code goes here</nav>";
$('#header').html(navbar);
}
Irfan Ullah
  • 25
  • 7
  • So in the `` of my HTML file I put that header line. Then I just wrapped my `navBar.html` code in the javascript like you put, and saved as `navBar.js`. ...nothing happens in the HTML - I assume I'm missing something? How does the `.html` know to look to that javascript file? I also escaped all my `"` in the navBar.js, like ` " – BruceWayne Nov 04 '17 at 17:47
0

You can try the below script, 

<script>
  $("#nav-placeholder").load("navBar.html")
</script>

But this needs a localhost server to run. Am assuming you run this on a server

Gowtham Shiva
  • 3,802
  • 2
  • 11
  • 27
  • Where would I put that? I updated my .html example. I tried adding that at the bottom, above `

    ` but nothing happens. Both of my html files are in the same folder on my computer. (they're local files)

     – BruceWayne Nov 04 '17 at 17:55
  • are you running the html from localhost? like WAMP or LAMP ? or directly running it in the browser – Gowtham Shiva Nov 05 '17 at 05:27
  • Uhm...I'm just opening the .html in Chrome. Not using a host? I don't know, I'm new to this. I edit my HTML file in Sublime, then drag the .html into a chrome tab. – BruceWayne Nov 05 '17 at 05:30
  • Unfortunately you need a server to pull files and display in your page. But the best workaround for you can be http://api.jquery.com/replaceWith/ – Gowtham Shiva Nov 05 '17 at 05:36
  • @BruceWayne Try this approach too .. https://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript – Gowtham Shiva Nov 05 '17 at 05:38
0

i have coded the completed scenario for you. Check the following code. I have executed the code, it is working. I hope it will solve your problem.

HTML FILE

<!DOCTYPE html>
<html>
<head>
    <title>HTML FILE</title>
    <!-- THIS IS JQUERY FILE, YOU CAN DOWNLOAD IT FROM THE JQUERY SITE
    IT MUST BE INCLUDED IN THE HEADER TO AVOID ANY CONFLICT. YOU CAN 
    INCLUDE IT INTO FOOTER OR IN THE END OF THE BODY TOO.
     -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>

    <header id="header"></header>
    <section>This is section</section>


    <!-- THE FOLLOWING IS THE JAVASCRIPT FILE, IN WHICH 
        I HAVE CODE THE NAV BAR. THIS JAVSCRIPT FILE MUST BE INCLUDED IN THE END
        OF THE BODY.
     -->
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>

JAVSCRIPT FILE

var navbar = "<nav><ul>";

navbar = navbar+ "<li>This is nav bar</li></ul>";

$('#header').html(navbar);
Irfan Ullah
  • 25
  • 7