inhoud veranderen zonder iframe

door **julien** » 11 apr 2005 13:04

Graag had ik bovenaan aan hoofdmenu met links een submenu.
Dit is al gelukt:
http://www.cadsite.be/testindex.html
Nu had ik graag gehad dat na het klikken op een onderdeel in het submenu de inhoud verandert.
Iemand een idee hoe ik dit netjes kan doen zonder frames?

Alvast bedankt.

door **Stef** » 11 apr 2005 13:56

Dan zou ik persoonlijk met php werken en dan includen.
ÃƒÂƒ?f je gaat met div's werken ÃƒÂƒÃ‚Â©n visible en unvisible.

door **julien** » 11 apr 2005 14:08

Het sub menu heb ik gemaakt met div's en hide en show, maar de hele site op die manier is niet te doen omdat er veel te veel inhoud is.
Kan je het bericht dan verplaatsen naar webdesign - php zodat ik daar eens kan vragen hoe ik dit kan oplossen?
Ik ken namelijk niets van php...
Bedankt.

door **Stef** » 11 apr 2005 14:15

Done.

Bij php werkt het zo:

In de kop.php zet je dan de menu.

index.php:
[syntax="php"]
<?php
include('kop.php');
?>
[/syntax]

Zet je dan wat er getoont moet worden.
Als ik jou was zou ik dan een index.php?id=lessen maken en alles op de index stoppen.

Ik hoop dat je het nog snapt. Smile

door **julien** » 11 apr 2005 14:20

door **KillerSponge** » 11 apr 2005 15:31

even verdere uitleg.

je hebt het bestand index.php met de volgende inhoud:

[syntax="php"] -- Al jouw code, menu etc... --
<?
// de inhoud
$id = $_GET['id'];
include('pages/'.$id);
?>[/syntax]

de pagina bestanden komen in de map "pages". in de pagina bestanden staat telkens de inhoud van de betreffende pagina. in de bestanden gebruik je alleen html codes, zonder <head>, <body> enz. bv.:

[syntax="html"]<font color="red">Dit is een mooie rode zin.</font><br>
<font color="blue">Dit is een mooie blauwe zin.</font>[/syntax]

vervolgens geef je de links in het menu dit formaat:

[syntax="html"]<a href="index.php?id=het_bestand_waar_naartoe_wordt_gelinkt">Tekst</a>[/syntax]

ik hoop dat dit een beetje duidelijk is Smile

door **julien** » 11 apr 2005 15:34

Dat lijkt me zeer duidelijk.
Morgen ga ik er eens wat mee testen.
Het enige nadeel hieraan lijkt me dat de hele pagina telkens opnieuw dient ingeladen te worden of heb ik het mis?

door **KillerSponge** » 11 apr 2005 15:40

door **julien** » 12 apr 2005 08:38

Blijkbaar heb ik het toch niet zo goed door... Confused

Op
http://www.cadsite.be/inhoud/index.php
heb ik onder Diverse een link gemaakt bij 'mezelf'
Maar ik krijg van in het begin een fout.

door **KillerSponge** » 12 apr 2005 11:10

dat komt omdat de waarde van $id leeg is, en daardoor probeert hij het bestand '' te openen. leeg dus. en dat kan natuurlijk niet Wink

als je naar index.php?id=diversen.php gaat, en er staat een pagina "diversen.php" in de pages map, gaat hij daar naar toe Smile

door **julien** » 12 apr 2005 12:10

Ik moest
[syntax="php"]<?
// de inhoud
$id = $_GET['id'];
include('inhoud/'.$id);
?>[/syntax]
plaatsen onder de html.
Moet ik hier dan nog iets aan aanpassen/toevoegen?

Diversen is hier de activering van een layer links. Hierin is er dan de link mezelf.php.

door **Derk** » 12 apr 2005 13:42

de linkjes moeten zo:
index.php?id=[id]
en dan moet op die ID plek de id van de pagina komen

Maar volgens mij is nit niet veilig
naja volgens mij is niet waart dit is niet veilig.
Ik kan nu namenlijk een script maken dat alles deletet dat hij tegenkomt en dat op mijn server uploaden
Vervolgens die ID veranderen naar mijn deleteall script en alles is weg

Ik zou het zo doen:

===index.php===
[syntax="php"]<a href="index.php?p=pagina_1">linkje 1</a><br>
<a href="index.php?p=biertje">Biertje?</a><br>
<a href="index.php?p=pagina_2">linkje 2</a><br>
<?
if ($_GET["p"]=="pagina_1")
{
$page="pagina_1.htm";
}
else if ($_GET["p"]=="biertje")
{
$page="biertje.htm";
}
else if ($_GET["p"]=="pagina_2")
{
$page="pagina_2.htm";
}
else
{
$page="home.htm";
}
include('inhoud/'.$page);
?>[/syntax]

en dan in het mapje "inhoud" komen de bestanden
home.htm
pagina_2.htm
biertje.htm
pagina_1.htm

Ik heb een voorbeeld.
Dit is te vinden op http://derk.3dmega.com/julien/

[edit] ff de bugs eruit gehaald Wink

door **julien** » 12 apr 2005 13:45

Zoveel moeite!

Bedankt ik test wat verder.

door **Derk** » 12 apr 2005 14:01

Ik heb een tutorial gemaakt hoe het precies werkt gezien het feit dat deze vraag er al eens eerder is geweest.
Ik schrijf onoverzichtelijk dat weet ik maar volgens mij moet je er helemaal uit komen.
http://derk.3dmega.com/site/php/Inhoud% ... iframe.htm

En die moeite: graag gedaan hoor ^^

<hr />Ik zat mij trouwens net te bedenken dat we (rutger en ik) een keer hadden geprobeerd of het veilig was wat je eerst had.
We waren tot de conclusie gekomen dat het wel veilig was.
Maar ik zou het zekere voor het onzekere nemen en het toch conteroleren zoals ik het doe.
Je baalt hoor als ineens al je bestanden weg zijn.

door **julien** » 12 apr 2005 14:36

Het begint te lukken!! :aanbid:
Nu nog zoeken hoe ik de correcte div actief kan houden.
Ikke blij. Razz

door **Derk** » 12 apr 2005 14:37

Je kan het script gewoon in je pagina stoppen en dan die linkjes in die div aanpassen aan mijn brouwsel Smile

door **julien** » 12 apr 2005 14:41

Dat heb ik gedaan:

http://www.cadsite.be/test/

De eerste 2 linkjes onder Diverse werken.

Maar het submenu verdwijnt nu telkens. Niet echt handig vind ik.

door **KillerSponge** » 12 apr 2005 14:59

dat is iets met divs, daarvoor moet je niet bij mij wezen ^^

maargoed, fijn dat het nu werkt Smile

door **julien** » 12 apr 2005 15:03

Van div's ken ik wel wat maar ik vrees dat dit niet kan...
Ik kan zeggen 'onclick' make visible, maar dan wordt de pagina ingeladen en dan staan die div's als default op hidden.

Daar zoek ik nog even naar een oplossing.

Bedankt voor de goede hulp! :aanbid: :aanbid:

door **Derk** » 12 apr 2005 15:26

door **julien** » 12 apr 2005 15:30

door **Derk** » 12 apr 2005 15:30

door **julien** » 12 apr 2005 15:35

[syntax="php"]<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Test index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="description" content="">
<meta http-equiv="keywords" content="Autocad">
<meta http-equiv="generator" content="mps htmlgate free">
<meta http-equiv="author" content="julien">
<script type="text/javascript">


function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="Layer1" style="position:absolute; left:91px; top:8px; width:563px; height:26px; z-index:1; visibility: visible"><a href="../index.html">startpagina</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','show','block','','hide','Lisp','','hide','Applicaties','','hide','contact','','hide','Diverse','','hide')">Cursus</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','hide','block','','show','Lisp','','hide','Applicaties','','hide','contact','','hide','Diverse','','hide')">blocks</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','show','Applicaties','','hide','contact','','hide','Diverse','','hide')">lisp</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','hide','Applicaties','','show','contact','','hide','Diverse','','hide')">Applicaties</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','hide','Applicaties','','hide','contact','','show','Diverse','','hide')">Contact</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','hide','Applicaties','','hide','contact','','hide','Diverse','','show')">Diverse</a></div>
<div id="Cursus" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>CURSUS<br>
Tips en trucks<br>
lessen<br>
links</p>
</div>
<div id="block" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>BLOCKS<br>
Wat zijn blocks?<br>
download<br>
links</p>
</div>
<div id="Lisp" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>LISP<br>
Wat is lisp<br>
download<br>
links</p>
</div>
<div id="Applicaties" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>APPLICATIES<br>
Wat zijn dat?<br>
download<br>
links</p>
</div>
<div id="contact" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>CONTACT<br>
Hoe contacteren?<br>
Formulier<br>
Adverteer<br>
Breng een tip aan<br>
Gastenboek<br>
<a href="http://forum.cadsite.be">Forum</a><br>
</p>
</div>
<div id="Diverse" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>DIVERSE<br>
<a href="index.php?p=mezelf">linkje 2</a><br>
<a href="index.php?p=test">test</a><br>
Uw link suggestie<br>
Lengte omzetten<br>
Oppervlakte omzetten<br>
Hoe helpen<br>
<a href="index.php?p=biertje">Biertje?</a><br>
<a href="index.php?p=pagina_2">linkje 2</a><br>
</p>
</div>
<div id="Inhoud" style="position:absolute; left:110px; top:50px; width:600px; height:500px; z-index:2; visibility: visible">
<?
if ($_GET["p"]=="mezelf")
{
$page="mezelf.html";
}
else if ($_GET["p"]=="test")
{
$page="test.html";
}
else if ($_GET["p"]=="pagina_2")
{
$page="pagina_2.htm";
}
else
{
$page="test.html";
}
include('inhoud/'.$page);
?>

</div>
</body>
</html>[/syntax]

door **Derk** » 12 apr 2005 15:49

Het is ongetest maar voor mij is testen een beetje moeilijk....
hier komt het:
[syntax="php"]<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Test index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="description" content="">
<meta http-equiv="keywords" content="Autocad">
<meta http-equiv="generator" content="mps htmlgate free">
<meta http-equiv="author" content="julien">
<?
if ($_GET["p"]=="mezelf")
{
$page="mezelf.html";
$menu="Diverse";
}
else if ($_GET["p"]=="test")
{
$page="test.html";
$menu="Diverse";
}
else if ($_GET["p"]=="pagina_2")
{
$page="pagina_2.htm";
$menu="Diverse";
}
else
{
$page="test.html";
$menu="geen";
}
?>

<script type="text/javascript">


function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" <?
if ($menu=="Cursus")
{
?>onload="MM_showHideLayers('Cursus','','show','block','','hide','Lisp','','hide','Applicaties','','hide','contact','','hide','Diverse','','hide')"<?
}
if ($menu=="Blocks")
{
?>onload="MM_showHideLayers('Cursus','','hide','block','','show','Lisp','','hide','Applicaties','','hide','contact','','hide','Diverse','','hide')"<?
}
if ($menu=="lisp")
{
?>onload="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','show','Applicaties','','hide','contact','','hide','Diverse','','hide')"<?
}
if ($menu=="Applicaties")
{
?>onload="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','hide','Applicaties','','show','contact','','hide','Diverse','','hide')"<?
}
if ($menu=="Contact")
{
?>onload="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','hide','Applicaties','','hide','contact','','show','Diverse','','hide')"<?
}
if ($menu=="Diverse")
{
?>onload="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','hide','Applicaties','','hide','contact','','hide','Diverse','','show')"<?
}
?>>

<div id="Layer1" style="position:absolute; left:91px; top:8px; width:563px; height:26px; z-index:1; visibility: visible"><a href="../index.html">startpagina</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','show','block','','hide','Lisp','','hide','Applicaties','','hide','contact','','hide','Diverse','','hide')">Cursus</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','hide','block','','show','Lisp','','hide','Applicaties','','hide','contact','','hide','Diverse','','hide')">blocks</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','show','Applicaties','','hide','contact','','hide','Diverse','','hide')">lisp</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','hide','Applicaties','','show','contact','','hide','Diverse','','hide')">Applicaties</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','hide','Applicaties','','hide','contact','','show','Diverse','','hide')">Contact</a>
| <a href="#" onClick="MM_showHideLayers('Cursus','','hide','block','','hide','Lisp','','hide','Applicaties','','hide','contact','','hide','Diverse','','show')">Diverse</a></div>
<div id="Cursus" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>CURSUS<br>
Tips en trucks<br>
lessen<br>
links</p>
</div>
<div id="block" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>BLOCKS<br>
Wat zijn blocks?<br>
download<br>
links</p>
</div>
<div id="Lisp" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>LISP<br>
Wat is lisp<br>
download<br>
links</p>
</div>
<div id="Applicaties" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>APPLICATIES<br>
Wat zijn dat?<br>
download<br>
links</p>
</div>
<div id="contact" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>CONTACT<br>
Hoe contacteren?<br>
Formulier<br>
Adverteer<br>
Breng een tip aan<br>
Gastenboek<br>
<a href="http://forum.cadsite.be">Forum</a><br>
</p>
</div>
<div id="Diverse" style="position:absolute; left:5px; top:50px; width:100px; height:150px; z-index:2; visibility: hidden">
<p>DIVERSE<br>
<a href="index.php?p=mezelf">linkje 2</a><br>
<a href="index.php?p=test">test</a><br>
Uw link suggestie<br>
Lengte omzetten<br>
Oppervlakte omzetten<br>
Hoe helpen<br>
<a href="index.php?p=biertje">Biertje?</a><br>
<a href="index.php?p=pagina_2">linkje 2</a><br>
</p>
</div>
<div id="Inhoud" style="position:absolute; left:110px; top:50px; width:600px; height:500px; z-index:2; visibility: visible">
<?
include('inhoud/'.$page);
?>

</div>
</body>
</html>[/syntax]

Laat ik eerlijk wezen het is niet helemaal een pro oplossing....
maargoed het werkt.

Nu is er wat veranderd:
Ik heb het conteroleren boven de body gezet.
Je mag het verplatsen maar houd het boven de body.
onder die pagina dingksmes $page="test.html"; is een regeltje. Deze geeft aan welk tabje open moet als hij welke pagina weergeeft.
De volgende regeltjes mogen. Ik denk dat voor zich spreekt welke wat doet:
$menu="Cursus";
$menu="Blocks";
$menu="lisp";
$menu="Applicaties";
$menu="Contact";
$menu="Diverse";

Dan heb je deze nog:
$menu="geen";
dit is gewoon geen tabje open.
Ook als je een typfout zou maken (het is hoofdlettergevoelig) dan blijven de tabjes dicht.

door **julien** » 12 apr 2005 15:54

Ik heb het even online geplaatst maar nu ben ik de sub menu's kwijt.
http://www.cadsite.be/test/
Ik zoek natuurlijk even mee.