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

Question

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.

@Harsh, as per my knowledge load() method is already depricated in latest jquery. See (stackoverflow.com/questions/12643160/load-method-deprecated). — Samir
– Samir, Commented Sep 7, 2016 at 11:11
thanks for comment, In header file i have some div with contented like drop-down menu after including the layout of drop-down menu is not perfect. with the code in same file everything is working fine — Harsh sachdev
– Harsh sachdev, Commented Sep 7, 2016 at 11:14

arora · Accepted Answer · 2016-09-10 10:03:38Z

1

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

edited Sep 10, 2016 at 10:03

answered Sep 10, 2016 at 9:54

arora

8697 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KSL · Accepted Answer · 2016-09-07 11:13:51Z

0

Try this

<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"/>

<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>

answered Sep 7, 2016 at 11:13

KSL

13 bronze badges

Comments

Jerad Rutnam · Accepted Answer · 2016-09-07 11:37:20Z

0

For your original issue,

If you want to include html content dynamically, here is a method to do it,

HTML,

<link data-include="includes/header.html">

JS,

$('link[data-include]').each(function(){
    var el = $(this),
        template = $(this).data('include');

    $.get(template, function(data){
        $(el).replaceWith(data);
    });
});

Hope this will help!

Try this,

Now you can include any partial content as you want.

<!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>

<link data-include="header.html">

<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(){
  $('link[data-include]').each(function(){
    var el = $(this),
        template = $(this).data('include');

    $.get(template, function(data){
        $(el).replaceWith(data);
    });
  });   
});
</script> 
</body>
</html>

edited Sep 7, 2016 at 11:37

answered Sep 7, 2016 at 11:31

Jerad Rutnam

1,5461 gold badge14 silver badges30 bronze badges

4 Comments

Harsh sachdev Over a year ago

Thanks for answering, This is including my header like .load() function but unfortunately I am facing the layout issue in this also.

Jerad Rutnam Over a year ago

OK can you provide the actual sample? Because without looking at it can't exactly say what is the issue. You can use something like jsbin.com

Harsh sachdev Over a year ago

I have multiple CSS/ JS file where i can upload my sample code. Sites like jsfiddle allows only single files.

Jerad Rutnam Over a year ago

You can add multiple files. And use jsbin. Because it shows full html. So its easy for us to check the file importing order.

Samir · Accepted Answer · 2016-09-07 12:24:37Z

0

Try using like this,

$(document).ready(function() {
    $.get('header.html').success(function(data){
           var headerHTML = data;
           $('#inc').html(headerHTML);
    });
});

edited Sep 7, 2016 at 12:24

answered Sep 7, 2016 at 11:22

Samir

1,3681 gold badge10 silver badges16 bronze badges

3 Comments

Harsh sachdev Over a year ago

The same code is not showing anything also there is no error in console Please explain what #div_content means ? where I have to declare this div in my code I am using a div call "inc"

Samir Over a year ago

The answer has been edited. Please check it once in your page. This is working fine for me.

Harsh sachdev Over a year ago

by this the header will include but the layout problem not solved here is the sample code you can check it codepen.io/anon/pen/LRVQoN

KSL · Accepted Answer · 2016-09-08 06:44:23Z

0

How about this:

Instead of using a load method, use an iframe

<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>

Edit

<iframe id="inc" src="header.html" class="hidden"></iframe>

css

iframe.hidden {
  padding: 0;
  margin: 0;
  border: 0;
  overflow: auto;
  display: hidden;
}

iframe.hidden.load {
  padding: 0;
  margin: 0;
  border: 0;
  overflow: auto;
  display: block;
}

JS

!!! Here trigger means the trigger when you want it to load such as onClick, onMouseover, etc !!!

Requires jQuery

$('iframe.hidden').trigger(function() {
  $(this).addClass('load');  
});

edited Sep 8, 2016 at 6:44

answered Sep 7, 2016 at 11:37

KSL

13 bronze badges

4 Comments

Jerad Rutnam Over a year ago

Don't use iframe, unless you are load a page outside from your domain. :)

Harsh sachdev Over a year ago

iframe is increasing the issue because it automatically loads <html><body> this type of tags so still facing layout issue

KSL Over a year ago

1. You can style the frame using css and that can solve the issue

KSL Over a year ago

2. You can add a class to the iframe that does display:hidden; and when you want it to load, use JS to change the style to display: block;

Collectives™ on Stack Overflow

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

5 Answers 5

Hope this helps.

Comments

Try this

Comments

Try this,

4 Comments

3 Comments

How about this:

Edit

css

JS

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Hope this helps.

Comments

Try this

Comments

Try this,

4 Comments

3 Comments

How about this:

Edit

css

JS

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related