I am using this question to reuse a header on my pages. Here's how my files look like:
index.html
<header></header>
[other content]
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
app/index.html
<header></header>
[other content]
<script src="../js/jquery.js"></script>
<script src="../js/main.js"></script>
header.html
<a href="index.html">Home</a>
<a href="app/index.html">App</a>
js/main.js
$(function(){
$("header").load("../header.html");
});
index.html works fine, but app/index.html doesn't - in the header, the Home link opens app/index.html instead of index.html. This is because it copied header.html's contents and since the current folder is app, it breaks the navigation. How can I avoid this?
