HTML pagina op HTML website uitvoeren

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ivan Heerkens

Ivan Heerkens

28/12/2019 18:23:50
Quote Anchor link
Beste lezer,

Ik ben sinds kort begonnen met mijn eigen website te ontwikkelen. Nu loop ik tegen wat problemen aan. Via Google kom ik er niet uit of het werkt gewoon niet zoals ik het wil.

Ik heb een HTMl/CSS gebaseerde website waar ik graag de header, footer en menu apart wil hebben. Deze wil ik dan op de pagina in laten laden los van de gewone pagina. Dus index.html die dan menu.html, header.html en footer.html laad. Volgens bronnen moet dit met JavaScript, maar weet niet wat ik fout doe. ik volg de stappen zoals op internet staat maar het lukt mij niet.

Iemand enig idee hoe dit werkt? Ik heb geen voorbeeldcode omdat ik na al het proberen het heb opgegeven en niet opgeslagen heb. Natuurlijk wel de standaard index.html van mij.
 
PHP hulp

PHP hulp

29/03/2024 09:01:02
 
- Ariën  -
Beheerder

- Ariën -

28/12/2019 18:40:06
Quote Anchor link
Wat heb je dan geprobeerd? Welke bron heb je gebruikt?
Kan je de relevante code tussen code-tags plaatsen?

Ik hoop dat je geen nostalgische framesets hebt gebruikt....
Gewijzigd op 28/12/2019 18:44:01 door - Ariën -
 
Ivan Heerkens

Ivan Heerkens

28/12/2019 19:33:56
Quote Anchor link
Bedankt voor je snelle reactie. ik gebruik zeker geen frame zooi. haha

Het gaat om hët volgende: :
KLIK VOOR BRON

Heb de scripts overgenomen en aangepast waar nodig, maar werkt niet. Tevens moet ik ook de js file er voor hebben, die ik ook niet zelf kan maken helaas.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
  $("#header").load("header.html");
  $("#footer").load("footer.html");
});
</script>


Vroeger kon ik het enig sinds wel, maar weet het nu gewoon niet meer hoe het moet :S
Het is niet mijn eigen code, maar wellicht krijg je hiermee het idee wat ik wil. :)
Gewijzigd op 28/12/2019 21:25:33 door - Ariën -
 
Adoptive Solution

Adoptive Solution

28/12/2019 19:48:57
Quote Anchor link
Dit moet werken.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<title>Titel</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="header"></div>
<div id="menu"></div>
<p>Meer inhoud...</p>
<div id="footer"></div>

<script>
$(function(){
    $("#header").load("header.html");
    $("#menu").load("menu.html");
    $("#footer").load("footer.html");
});
</script>

</body>
</html>


header.html

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<h1>Header</h1>


menu.html

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<p><a href="#">menu 1</a> | <a href="#">menu 2</a> | <a href="#">menu 3</a></p>


footer.html

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<h3>Footer</h3>
 
Ivan Heerkens

Ivan Heerkens

28/12/2019 20:08:09
Quote Anchor link
Super snelle reactie, dank je wel!
Echter krijg ik alleen Meer inhoud... te zien.
Gewijzigd op 28/12/2019 21:25:00 door - Ariën -
 
Adoptive Solution

Adoptive Solution

28/12/2019 20:16:02
Quote Anchor link
"Meer inhoud" is wat je zelf moet aanpassen en toevoegen.
 
Ivan Heerkens

Ivan Heerkens

28/12/2019 20:23:07
Quote Anchor link
Dat snap ik, maar ik zie na het overnemen nog altijd niet de header, footer en menu :S. alleen Meer inhoud... het laden duurt ook enorm lang.
Gewijzigd op 28/12/2019 21:24:35 door - Ariën -
 
Adoptive Solution

Adoptive Solution

28/12/2019 20:24:38
Quote Anchor link
Ik heb duidelijk aangegeven welke bestanden je nog meer moet maken.
 
Ivan Heerkens

Ivan Heerkens

28/12/2019 20:27:48
Quote Anchor link
ik heb index.html waarin de grote code in staat. Daarnaast ook header.html, menu.html en footer.html aangemaakt in dezelfde map. Precies zoals het er staat
Gewijzigd op 28/12/2019 21:24:11 door - Ariën -
 
- Ariën  -
Beheerder

- Ariën -

28/12/2019 21:05:47
Quote Anchor link
Hoe voer je index.html uit?
 
Ivan Heerkens

Ivan Heerkens

28/12/2019 21:07:11
Quote Anchor link
ik open hem gewoon in mn browser, google chrome.
Gewijzigd op 28/12/2019 21:23:51 door - Ariën -
 
- Ariën  -
Beheerder

- Ariën -

28/12/2019 21:18:14
Quote Anchor link
En via welke URL?

Edit:
Ik heb wat quotes weggeknipt uit dit topic. Het is niet nodig om het voorlaatste bericht steeds integraal te quoten. Onderaan staat ook een 'quick-reply'!
Gewijzigd op 28/12/2019 21:28:47 door - Ariën -
 
Ivan Heerkens

Ivan Heerkens

28/12/2019 21:27:43
Quote Anchor link
gewoon localhost
file:///C:/Users/XXXX/Desktop/XXXX/Site/test/index.html
Gewijzigd op 28/12/2019 21:28:10 door - Ariën -
 
- Ariën  -
Beheerder

- Ariën -

28/12/2019 21:31:21
Quote Anchor link
Waarschijnlijk zal Chrome, en menig browser, uit veiligheidsoverwegingen weigeren om jQuery in te laden.

Upload het ergens naar toe, of draai een eigen (lokale) webserver, en benader het via een http/https URL.

Overigens, een pad valt niet onder 'localhost' :-)
Gewijzigd op 28/12/2019 21:58:41 door - Ariën -
 
Ivan Heerkens

Ivan Heerkens

28/12/2019 22:06:18
Quote Anchor link
Dit werkt! helemaal top! dat was dus het probleem... local doet hij dat dus niet.
Had ik het toch al die tijd goed gedaan :)

Enorm bedankt voor jullie hulp!
Gewijzigd op 28/12/2019 22:13:04 door - Ariën -
 
- Ariën  -
Beheerder

- Ariën -

28/12/2019 22:13:49
Quote Anchor link
Fijn dat het werkt.
Lees ook even de mod-break met dik gedrukte tekst in het vlak. :-)
Gewijzigd op 28/12/2019 22:14:42 door - Ariën -
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.