Menu
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.
994
The typical answer is: Add JavaScript code by the end of the </body> tag and. Add CSS code in-between the <head> tags.
JavaScript in <head> or <body>Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
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
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
