CSS + Noob + Import html
Hey guys
Need some help here.
Is it possible to include an HTML file inside another HTML file without an iframe? I wanted to create the structure of the page in one file and include it inside another HTML (for example, have one index that dynamically includes an HTML file in a section, called by the menu OR having the menu, top and footer in one or two files and include them in all the other pages...)

Yes, "server side include" would be the Google phrase, see https://en.wikipedia.org/wiki/... .

However, this incurs an additional file access everytime the main HTML is loaded.

How about using js dom?

I would personally use PHP to do this server side with the line

<?php include ("file_you_are_importing.php"); ?>

Just pop that in as a like to your page, make sure both are php files instead of HTML and make sure you test it on a server/localhost because it won't work if you just try and open a PHP file in a browser

@thechez99 Thanks but avoiding any language for now... using only HTML, CSS and maybe JS, but thank you

@devTea Hum... trying something I found in stack Overflow, but isn't working

<code>

<li><a href="aboutme.html" onclick="load_main_contentor()">About Me</a></li>

function load_pagina() {

document.getElementById("main_contentor").innerHTML = '<object type="text/html" data="aboutme.html" ></object>';

}

</code>

This opens the page itself :(

I mean render the dom from js, not render the html

Ever tried js framework? They do it like that

@norman70688 object may be a solution...

Fuck it... Just going Jquery.

If the include doesn't change at runtime, doing that statically on your dev machine can also be a solution.

I got doc header, menu and footer as separate HTML files and (ab)use GCC's preprocessor to build the resulting pages, but any static website builder should also work.

well, jquery doesn't work.. Yes it opens... can even use vars and one function for all the menu, but opens the entire page, doesn't load inside the doc :(

@Fast-Nop Yes that would be a solution, I had it with Iframes, but Iframe sucks for responsivness

Use jQuery ajax or JavaScript to hold that html and add it dynamically to your page.

It's easy I did it many times :)

@GyroGearloose plus that with C's preprocessor, you also have conditional shit via #if and #ifdef that can evaluate #defines. That enables stuff like "grey out the menu button for a page on that page itself". Or making a #define for page title and canonical URL in the actual page HTML file, but evaluating that in the included file for the doc header.

The nice thing is that it's pure text replacement that isn't actually C related, and no runtime performance impact on the final web page. The downside is that it's usually only C(++) programmers who are familiar with it.

https://zabkat.com/blog/...

@developerrky Trying to do exactly that, not working....

can you point a good tutorial/page/video so I can learn how to do it correctly? thanks

If you are lazy to create html pages with same piece of code in it because when you have to change something you have to change all the files.

Use nunjucks, period.

Combine with gulp.

Automate shits.

Profit.

More time for procasinate.

Been doing this for a while.

Yep, going with Jquery...

time to learn it anyway.

Almost done

one more question

<code>

(...)

<script>

$(function call_contentor_aboutme() {

$("#main_contentor").load("aboutme.html");

});

$(function contentor_vazio() {

$("#main_contentor").load("intro.html");

});

</script>

(...)

Call: <a href="" onclick="call_contentor_aboutme()">About Me</a>

</code>

How can I change the Call so I can use only one function with an entry parameter?

ex: <a href="" onclick="call_contentor(aboutme.html)">About Me</a>

Of course that there is something missing because aboutme.html is not passed as a string...

@Fast-Nop Thanks but too complicated for me...

Cumming back after years without coding, I'm cumming by fazes... Now I just need to learn the basics, HTML + CSS + JS (I know a little but not much really) and a few libraries... Going for Bulma and now jquery.

@norman70688 lol really that bad?

I have no notions of this stuff... In my time I used tables, but there were only two resolutions to care about.

Edit: Gonna watch a youtube tutorial about jquery lol

FUCKING BITCH ISN'T WORKING

@GyroGearloose I didn't bookmark it but stackOverflow has the solution. Try jQuery load tutorial, I'm out of station otherwise I could help you, sorry.

FUCK THIS SHIT

I finally did IT

and... It looks exactly like the code I had before...

just deleted everything and started again, now it works.

2 hours for this... Fuck

Edit.: Found 1 difference:

<li><a id="btn_aboutme" type="button">About Me</a></li>

Added the type="button" .

Whatever, is working

@norman70688 I changed my idea completely...

This is my code now:

<code>

(...)

<script type="text/javascript">

$(document).ready(function(){

$(".btn_menu").click(function(){

var panelId= $(this).attr("data-panelid");

$("#main_contentor").load(panelId);

});

});

</script>

(...)

<li><a class="btn_menu" data-panelid="aboutme.html" type="button">About Me</a></li>

(...)

</code>

@GyroGearloose does it worked?

FFFFFFFFFFFFUUUUUUUUUUUUUCCCCCCKKKKKKKKKKKK

Works on local drive but won't work in VPS??

Check it out

https://rjpf.ddns.net/

Buttons does nothing...

@GyroGearloose check console

@falmesino nunjucks look cool :p

My problem is not laziness... I want to separate my pages. 20 years ago I would copy paste the menu and footer, nowadays that is not necessary.

I just want to separate things, like a program, the main form for a menu, header, footer and everything else dynamically embedded on button click...

@rajeshyadavnet This might sound stupid, but where is the console in Chrome?

edit: found it

M G... for some reason the FTP didn't copy the django file.

Thanks for all the tips guys :p learned to much today....

Don't know If i have a brain to do the contents today lol

@GyroGearloose on button click there would error in console

@GyroGearloose good

@GyroGearloose FTP sucks, I always upload and extract. It's faster and reliable

@norman70688 what do you mean by static site generator?

@norman70688 that's the benefit of joining devRant

We share our knowledge.

Not going to read through all the comments but since you don't want server side include á php, then there's https://handlebarsjs.com/

@JoshBent Looks nice :D

prefer the jquery solution, but this is also very interesting for prototyping...

@norman70688 hum... not going full static, but the tool is nice :p

@GyroGearloose

You could have saved yourself hours if you'd taken the PHP suggestion.

File 1.php:
<?

HTML code to import into other files here

?>

File 2.php:

<? Include ("file 1.php") ?>

More HTML here

That's it. You're done.

@RiderExMachina Yep, but I don't know If I'm going with PHP or Django and don't want to install anything other then the basics in my server for now, since, If I fuck up, I have to start all over again (the server config).

A very simple jquery import works fine.

Index.html :
Some code...

<myMenu></myMenu>

Create a menu.html file

Include a js like

$('myMenu').load('menu.html');

At the bottom of your index.html.

And voilà, it works (tested).

Static site generators are helpful for doing this

@RiderExMachina please stop this madness, better suggest using a proper templating engine + framework, you're making him make the same mistakes we've all gone through, before told better - for what?..

Nahhh... I like all the answers. Already found my own, but I'm learning so much... Didn't even know that static generators existed.

Although isn't good enough for me, because eventually, I'll need dynamic sites with BD. Thinking about learning Django for that, I really like python.