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

Asked

Viewed 1,216 times

1

I’m having a problem to call my header and footer on all pages, because when I put in sub folders inside the project it just doesn’t pick up and I tried everything to my knowledge but I can not solve, the codes respectively js(jquery),header and footer and the index, however only the index would be outside of project subfolders as you can see in the image below however when I make the same call and organize link references does not work within subfolders that are sub menus that are also called in the index, how much code I’ll leave the link from the repository here : insert 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>
inserir a descrição da imagem aqui

javascript jquery html5 css3

  • So, man, you got it sorted out?

2 answers

0

Try calling the function in 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>

  • Unfortunately I need it to be the way you are using the function in js and only call in the other pages but the problem is that I can’t put in the subfolders and work the same way as index.

0

Regardless of which directory you are in js is running if you reference the link to the function .onload() in the "absolute" format it will seek 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")

Browser other questions tagged javascript jquery html5 css3

You are not signed in. Login or sign up in order to post.