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 (http://stackoverflow.com/questions/12643160/load-method-deprecated). — Samir, Sep 07 '16 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, Sep 07 '16 at 11:14
Thanks @Samir but than how i will include my header, is there any other alternative i am not using php. — Harsh sachdev, Sep 07 '16 at 11:17

arora · Accepted Answer · 2016-09-10T10:03:38.653

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

score 0 · Answer 2 · answered Sep 07 '16 at 11:13

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>

Samir · Answer 3 · 2016-09-07T12:24:37.077

0

Try using like this,

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

edited Sep 07 '16 at 12:24

answered Sep 07 '16 at 11:22

Samir

1,312
1
10
16

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" – Harsh sachdev Sep 07 '16 at 11:33
The answer has been edited. Please check it once in your page. This is working fine for me. – Samir Sep 07 '16 at 12:25
by this the header will include but the layout problem not solved here is the sample code you can check it http://codepen.io/anon/pen/LRVQoN – Harsh sachdev Sep 08 '16 at 06:47

Jerad Rutnam · Answer 4 · 2016-09-07T11:37:20.403

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>

Thanks for answering, This is including my header like .load() function but unfortunately I am facing the layout issue in this also. — Harsh sachdev, Sep 07 '16 at 11:43
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 https://jsbin.com/ — Jerad Rutnam, Sep 07 '16 at 11:45
I have multiple CSS/ JS file where i can upload my sample code. Sites like jsfiddle allows only single files. — Harsh sachdev, Sep 07 '16 at 12:05
You can add multiple files. And use jsbin. Because it shows full html. So its easy for us to check the file importing order. — Jerad Rutnam, Sep 07 '16 at 19:27

KSL · Answer 5 · 2016-09-08T06:44:23.507

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 08 '16 at 06:44

answered Sep 07 '16 at 11:37

KSL

1
3

Don't use iframe, unless you are load a page outside from your domain. :) – Jerad Rutnam Sep 07 '16 at 11:42
iframe is increasing the issue because it automatically loads this type of tags so still facing layout issue – Harsh sachdev Sep 07 '16 at 11:50
1. You can style the frame using css and that can solve the issue – KSL Sep 08 '16 at 06:35
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; – KSL Sep 08 '16 at 06:36