CODEWITHSUNDEEP
javascriptjqueryhtmlcompilationinclude
Sander Schaeffer
Sander Schaeffer

Reputation: 2827

Can you 'compile' html files together to simulate a 'include' function?

I love SASS for the reason you can create mixins and re-use your code by including various SASS files which compile upon export/save (depending on your application). PHP can do somewhat the same, but I've never seen one HTML page broken into various HTML files and compiled to one whole upon export/save.

I can't write PHP and I don't want that overhead just to make things easier and having to adjust one files (i.e. 'navigation.html') instead of changing code in every page on the site.

Therefor I'm asking either one of the following two:

  1. A compiler, such as Codekit, that can merge parts of HTML files together
  2. A HTML/Javascript/jQuery/Ajax (<- No experience with, please guide) function to include HTML parts together upon load

Having to adjust one thing over 50 pages across can be a pain, but having the same code on each can also serve some uniformity and create assurance. That's why I was hoping there was a solution to my request.

Upvotes: 0

Views: 1277

Answers (2)

Galeaettu
Galeaettu

Reputation: 74

You can use w3-include-html from w3.js

Example:

<div w3-include-html="content.html"></div>

HTML Include

Upvotes: 1

DIEGO CARRASCAL
DIEGO CARRASCAL

Reputation: 2129

Your second option is what I work with, you create generic "components" and depending on things like the ID of the parent component where you insert it, it will behave in different ways or load from JS or jQuery different "function libraries" for example if the parent div of the menu component is 'mainMenu' it will call the case where the main options are displayed. When the menu component parent ID is 'load' it displays the load button and adds on it the code to load files...

page 1

 <div id='mainMenu'></div>

then page 2

 <div id='load'></div>

then jQuery

$(document).ready(function(){
    component = "<ul id='menu'><li></li></ul>";
    $(body).find("div").each(function(){
        switch($(this).attr("id") {
            case "mainMenu":
                code to add functionality to component;
                break;
            case "load":
                code to add functionality to component;
                break;
            default:
                code to manage error;
        }
    });
}):

This is just an example of what I think you could do.

Upvotes: 1

Related Questions