Harsh sachdev Harsh sachdev - 1 month ago 10
CSS Question

CSS/JS won't work if I include the header

Here is my

index.html
file

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<div id="inc"></div>

<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">


</section>
</div>

<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$("#inc").load("header.html");
});
</script>
</body>
</html>


If I copy-paste the content of
header.html
page after the body, then everything works fine.

when I tried to include the
header.html
page using
.load()
function then the CSS won't work properly.

Here is the online sample codepen

if I include the content of
div="inc"
from an external file like
header.html
than drop-down menu will overlap each other.

Answer

Hope this helps.

Your scripts.js file contains

$(window).load(function(){

  "use strict";
    // Align Elements Vertically

    alignVertical();
    alignBottom();

    $(window).resize(function(){
        alignVertical();
        alignBottom();
    });

    // Isotope Projects
});

The scripts.js file you have provided is trying to add some styling to the header.html.

but it's not doing the expected behaviour because the scripts.js file is loading before the header.html file.

Just add this at the end after your header content

<script src=assets/js/scripts.js></script>

This will let the header.html content load first and than scripts.js

Also here is the github repo code structure

https://github.com/siddhartharora02/jsLoad