0

I'm working on a required static page assignment. (not my choice)

I have a navigation that I'd like to be available for dozens of static html files.

I'm getting the markup via jQuery/javascript

$(function () {
    // get navigation menu
    $.get('nav.html', function (data) {
        $('.navigation').replaceWith(data);
    });
});

Things start to get funky here

The markup I'm loading into multiple pages are as such: I'm adding no body tag since the idea is that this content will be loaded into existing HTML pages.

nav.html

<ul>
  <li><a href="">Home</a></li>
  <li><a href="">News</a></li>
  <li><a href="">Contact</a></li>
  <li><a href="">About</a></li>
</ul>

My problem is that none of the styles applied to nav.html were loaded. Then in order to get the css styles into nav.html I added a head tag which smells like a very bad practice and is where I'm seeking guidance here.

nav.html (with head tag)

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="xlib/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="app.css" />
    <link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<ul>
  <li><a href="">Home</a></li>
  <li><a href="">News</a></li>
  <li><a href="">Contact</a></li>
  <li><a href="">About</a></li>
</ul>

What is the best practice to load same HTML markup into multiple pages, while doing so asynchronously and getting all the needed styles for the same HTML markup.?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Jonca33
  • 3,333
  • 7
  • 25
  • 35
  • Did you try adding the stylesheet without the `` tag? Also, there's no real "best practice", there are opinions, and SO doesn't do those. Perhaps amend your question to just asking how to get the styles in there. – Heretic Monkey Mar 03 '18 at 22:05
  • I did, without the head tag the content broke... isn't an issue to have two head tags into one html file? as an end result... – Jonca33 Mar 03 '18 at 22:07
  • If you're loading it with ajax, it matters less (jQuery and browsers know what you mean). I would suggest that you just combine the CSS for your navigation in with the main page; if it's truly going to be on a lot of pages, the overhead of having on a few pages where it doesn't apply is minimal. – Heretic Monkey Mar 03 '18 at 22:09
  • That's a good advice. Initially I was aiming to separate the concerns, with `home.html, home.css, about.html, about.css` etc.. but since `nav.html` is needed app-wide I guess the styles for `nav.css` should just go into `app.css` – Jonca33 Mar 03 '18 at 22:16
  • Possible duplicate of [Can I load external stylesheets on request?](https://stackoverflow.com/questions/2126238/can-i-load-external-stylesheets-on-request) Take a look at this question, which is basically the same as yours. – Heretic Monkey Mar 03 '18 at 22:18

1 Answers1

0

While "best practice" may be objective and a matter of opinion, I have been working with static and non-static web pages and for me the thing that seems to make the most sense and be the cleanest implementation is having a common css file that can be added in the head of the primary html files for each page needed.

If you like to organize your files bases on the different functional areas so that you have matching nav.html and nav.css (even nav.js) files I would look into a bundler tool that will generate the common css file (even common js file) for you. The bundler tool to use depends on the technology you use to compose the website.

Hopefully this is helpful, if you want anymore specifics let me know.

Codegenic
  • 61
  • 6
  • Thank you for the advice. I'll look into that. Which bundler do you suggest for barebones html, css and js? – Jonca33 Mar 03 '18 at 22:27
  • What kind of technologies do you use to compose the files for the website right now? Simple text editor? Some IDE? I can tell you what I use, but at the same time I wouldn't want to send you down a rabbit hole if there may be something much easier for you to use with your current technologies. – Codegenic Mar 04 '18 at 02:15
  • Using Visual Studio Code – Jonca33 Mar 04 '18 at 21:50
  • Then see [this](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier) or [this](https://marketplace.visualstudio.com/items?itemName=HookyQR.minify). I have used the first one in the past and worked for how I needed/wanted to use it. – Codegenic Mar 04 '18 at 23:43