Geek Answers Handbook

CSS / JS will not work if I include the title

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 the contents of the header.html page after the body, then everything will be fine.

when I tried to include the header.html page using .load() then CSS would not work properly.

Here is an online codepen example
if I include the contents of div="inc" from an external file such as header.html , than the drop-down menu will overlap each other.

+6
source share
5 answers

Hope this helps.

The 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 provided is trying to add style to header.html .

but it does not fulfill the expected behavior, because the scripts.js file scripts.js loaded before the header.html file.

Just add this to the end after the contents of the header

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

This will allow you to load header.html content header.html , not scripts.js

Also presented here is the github repository code structure

https://github.com/siddhartharora02/jsLoad

+1
source

Try

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

Try using this,

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

For your original version

If you want to dynamically include html content, here is a way 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 helps!

Try

Now you can include any partial content that you need.

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

How about this:

Instead of using the load method use 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, a trigger means a trigger when you want to load it, for example, onClick, onMouseover, etc.

JQuery required

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

More articles:


All Articles