If I have a section of HTML that is common across several html files, can I have it in its own .html file?

Question

The title might have been a bit confusing, sorry about that. Let me clarify.

So in my website, I have a <nav> section which is present on every .html page for the site. If I want to make a change to the nav menu, I have to change it on every single page.

Is there a way that I can have that <nav> section in its own .html file (e.g. nav.html) and then have it produced on every site .html page? That way, if I need to make a change then it only needs to be made in a single file (i.e. nav.html) and will still update on all pages when it's run.

If I can do that somehow, how can I make it so that it will scroll to the top of the page if the nav button of the current page is pressed?

So if I'm on photos.html and I click the "Photos" link on the nav bar (which would usually take me to photos.html), can I make it not refresh the page but instead just go to top, for example? (i.e. <a href="#">Photos</a>)

I think this will help you (for the first part of the question) http://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages — Elvis, Jan 22 '17 at 07:25
@Visrozar That does help, thanks. But if my nav.html uses things like JavaScript, the JS doesn't load when I do .load("nav.html") into the nav div. How can I make it so that the JavaScript works too? — user3636407, Jan 22 '17 at 08:46

guest271314 · Answer 1 · 2017-01-22T07:39:11.470

0

Is there a way that I can have that section in its own .html file (e.g. nav.html) and then have it produced on every site .html page?

You can use .load() or $.get() with .append() or .prepend().

$(function() {
  $.get("nav.html")
  .then(function(html) {
    $("body").prepend(html);
    $("a[href='#']:contains(Photos)").on("click", function(e) {
      e.preventDefault();
      $("html, body").animate({
        scrollTop:0
      }, 1000);
    });
  });
});

edited Jan 22 '17 at 07:39

answered Jan 22 '17 at 07:26

guest271314

1
10
82
156

Thanks. How can I get the JavaScript to work on the nav.html page? There is JavaScript that works with the menu navbar but it doesn't work when I do `$("#nav").load("nav.html");`. The html of the navbar loads in fine, but the JavaScript doesn't work. Any ideas how to make it work? Thanks – user3636407 Jan 22 '17 at 09:13
Why do you include `javascript` with `html` file? – guest271314 Jan 22 '17 at 09:14
No, I mean like for example, I have a main.js file with my JS for the navbar, and in my index.html file I have ``. But when I do `$("#nav").load("nav.html");`, the JavaScript for the navbar doesn't work – user3636407 Jan 22 '17 at 09:24
How is `main.js` related to Question? Can you create a plnkr http://plnkr.co to demonstrate? – guest271314 Jan 22 '17 at 09:26
you have to make sure you are including jQuery in your scripts. `` and make sure that this is included before your `main.js`. As @guest271314 said, it is really difficult to tell you what is wrong without all of the code or a working example. – Matthew Jan 22 '17 at 17:08

Matthew · Answer 2 · 2017-01-22T08:07:45.150

In order to have the Navbar in only one file jquery's .load or .get functions would be the easiest solution as stated in guest271314 answer. Although I would do something more like this to load the content:

$(document).ready(function() {
    $('#nav-container').load('nav.html');
});

I realize this would mean you would need <div id="nav-container"></div> on each page but this seems like a cleaner solution to me.

For the page jump you can simply use an id in your href like so. This will make it so the page will scroll to the top of the div with the id you enter into the href.

<div id="pictures"></div>
<a href="#pictures">Pictures</a>

You can also add some jQuery to make the page jump smooth. The script below was taken from this CSS-Tricks article and will make that page jump smooth.

$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Thanks. How can I get the JavaScript to work on the nav.html page? There is JavaScript that works with the menu navbar but it doesn't work when I do `$("#nav").load("nav.html");`. The html of the navbar loads in fine, but the JavaScript doesn't work. Any ideas how to make it work? Thanks — user3636407, Jan 22 '17 at 09:09
See my comment to you on guest271314's answer. It seems like you are not including jQuery in your html page. — Matthew, Jan 22 '17 at 17:16

score 0 · Answer 3 · answered Jan 22 '17 at 12:40

0

I would create an include file called something like navMenu.php that just has your nav menu code in it.

<nav> menu code here </nav>

Then each of your pages that you want to include this code rename with the extension .php
Then wherever in these other pages you want to include this nav menu code write

<?php require 'navMenu.php' ?>

Refer to: http://php.net/manual/en/function.require.php

answered Jan 22 '17 at 12:40

gwalshe

1
1

Although this is my preferred language, this answer does not answer the OPs question. PHP isn't even in the tags for the question. – Matthew Jan 22 '17 at 17:11

If I have a section of HTML that is common across several html files, can I have it in its own .html file?

3 Answers3