Header and html footer with css and jquery for all pages divided into sub folders

Navigation
1

I'm having a problem to call my header and footer on all pages, because when I put sub-folders inside the project, it simply does not get any more and I tried everything but I can not solve it, the js (jquery) , header and footer and the index, but only the index would be outside of subfolders of the project as you can see in the image below however when I make the same call and organize the link references does not work inside subfolders that are sub menus that are also called in the index, as is a lot of code I'll leave the repository link here: insert the link description here 

$(function(){
    $("#header").load("menus/header.html");
    $("#footer").load("menus/footer.html");
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
    <nav>
        <div class="container">
            <a href="index.html" class="logo"><img src="img/logo.png" id="tamlogo"></a>
            <div id="divcabecalho"><img id="tamlupa" src="img/lupa.png">
                <input type="text" id="inputcabecalho" placeholder="Buscar os melhores produtos nas melhores lojas..."
                       title="pesquise aqui">
                <button id="botaoinput">Buscar</button>
            </div>
            <a class="login-a" href="" id="FormEntrar"><img src="img/users.png" class="filtro" id="user">ENTRAR</a>
            <div class="nav-wrap">
                <ul class="nav-left">
                    <li class="buttom"><a href="subMenus/teste.html">Celulares</a></li>
                    <li class="buttom"><a href="transistor.html">Tv e Audio</a></li>
                    <li class="buttom"><a href="horizon.html">Eletrodomesticos</a></li>
                    <li class="buttom"><a href="projectCars.html">Notebook</a></li>
                    <li class="buttom"><a href="sniper.html">Games</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<footer>
    <div class="container">
        <br/>
        <a href="index.html"><img id="logo-footer" src="img/logo.png"/></a>
        <table>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </table>
        <p><b>&copy; 2018</b></p>
    </div>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/jquery.js"></script>
    <script src="js/menu.js"></script>
</head>
<body>
<div id="header"></div>
<div id="body"> so iria variar as paginas aqui</div>
<div id="footer"></div>
</body>
</html>
    
asked by anonymous 31.03.2018 / 20:29

2 answers

0

Try to call it the function in the Html itself: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
  <div id="header" onload="header.html"></div>
  <div id="body"> so iria variar as paginas aqui</div>
  <div id="footer" onload="footer.html"></div>
</body>
</html>
    
31.03.2018 / 21:26
0

Regardless of which directory your js is running on, if you reference the link to the .onload() function in the "absolute" format it will search correctly: 

// definir a base (root)
let uri = window.location.protocol,
    BaseRoot = uri + '//' + location.host + '/'

// chamar a partir do diretório raiz
$("#header").load(BaseRoot + "menus/header.html")
$("#footer").load(BaseRoot + "menus/footer.html")

// chamar a partir de sub-diretório (por exemplo de um arquivo em "/menus")
$("#sua-div").load(BaseRoot + "subMenus/teste.html")
    
31.03.2018 / 23:10
php - upload multi images to same field Using Jquery on a PHP page is it possible?