CODEWITHSUNDEEP
javascriptjqueryhtmlcssinclude
Harsh sachdev
Harsh sachdev

Reputation: 217

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.

Upvotes: 6

Views: 2100

Answers (5)

arora
arora

Reputation: 869

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

Upvotes: 1

KSL
KSL

Reputation: 1

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');  
});

Upvotes: 0

Samir
Samir

Reputation: 1368

Try using like this,

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

Upvotes: 0

Jerad Rutnam
Jerad Rutnam

Reputation: 1546

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>

Upvotes: 0

KSL
KSL

Reputation: 1

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>

Upvotes: 0

Related Questions