Vraagje over in- en uitklapbaar menu

[Verwijderd]

Ik heb dus een menu gemaakt bestaande uit tekst links. Nu kan dit menu open en dicht gevouwen worden door op de het hoofdonderwerp te klikken, door dan op de subonderwerpen te klikken gan je naar een andere pagina in het frame ernaast. Als je dan nogmaals op hoofdonderwerp klikt vouwt ie weer dicht.


zo ziet het er dus uit:

hoofdonderwerp
- subonderwerp
- subonderwerp
- subonderwerp
hoofdonderwerp
- subonderwerp
- subonderwerp

Nu wil ik zodra je op het volgende hoofdonderwerp klikt dat ie alle andere hoofdonderwerpen dan automatisch dichtvouwt!


Dit is het stukje javascript wat eraan hangt en de opbouw van het menu:

<script language="javascript">
<!--
//Expands and contracts the menu (if in Internet Explorer 4.0 or higher)
function change() {
if(!document.all)
return
if (event.srcElement.className=="expandable1"){
var x=event.srcElement.parentElement
if (x.all[2].style.display=="none"){
x.all[2].style.display='';
}
else {
x.all[2].style.display="none"
}
}
if (event.srcElement.className=="expandable2"){
var x=event.srcElement.parentElement
if (x.all[2].style.display=="none"){
x.all[2].style.display='';
}
else {
x.all[2].style.display="none"
}
}
}
document.onclick=change
//-->
</SCRIPT>


<table width="120" border="0" cellspacing="2" cellpadding="0" rules="rows">
<tr>
<td class="mainsection"> <a class="expandable1" href="#">Landbouw</a><br>
<p class="subsection" style="display:none">
<a href="producten/PL_tractoren.htm" target="mainFrame">Tractoren</a> <br>
<a href="producten/PL_Combines.htm" target="mainFrame">Combines</a> <br>
<a href="producten/PL_Ploegen.htm" target="mainFrame">Ploegen</a> <br>
<a href="producten/PL_Maaiers.htm" target="mainFrame">Maaiers</a> <br>
</p></td>
</tr>
</table>
<hr width="120">
<div align="center"></div>
<table width="120" border="0" cellspacing="2" cellpadding="0" rules="rows">
<tr>
<td class="mainsection"> <a class="expandable1" href="#">Tuinbouw</a><br>
<p class="subsection" style="display:none">
<a href="producten/PT_Gazonmaaiers.htm" target="mainFrame">Gazonmaaiers</a> <br>
<a href="producten/PT_Zitmaaiers.htm" target="mainFrame">Zitmaaiers</a> <br>
<a href="producten/PT_Tractoren.htm" target="mainFrame">Tractoren</a> <br>
</p></td>
</tr>
</table>

Sorry voor de lap met codes maar zo is het tenminste goed te zien hoe het opgebouwd is.

Ik vermoed dat er wat aan het stukje java-script moet worden toegevoegd, maar ik heb dus totaal geen verstand van java-scripting.

Kan iemand mij hierbij helpen?

[lavagiant]

Ja, breng een bezoek aan http://www.hotscripts.com. Daar staan schitterende menu's zoals jij die wilt. Dit kan met JS maar met DHTML is het een stuk eenvoudiger

[Verwijderd]

Misschien zou je de 'onblur' event handler aan elk hoofdonderwerp kunnen hangen.
dus:
x=document.getElementsByTagName('expandable1');
for (i=0;i<x.length;i++){x[i].onblur=x[i].style.display='none';}

[wacco]

Als je wilt dat je uitklap menu's niet 'over' de rest heen gaat, maar 'tussen' je code wordt ingevoegd, moet je ff mijn pagina bekijken. Never mind de pagina zelf, want de MySQL werkt nog niet op de server dus hij doet nog niks, maar ik denk dat het javascriptje je wel aan zal staan
Btw wel ff vermelden dat je em van mij gejat hebt he?
<wacco> webstack

[Woudloper]

Marco_J: Wellicht kan je hier eens kijken:

[rml]Woudloper in "[ js] wat is er fout aan deze regel???"[/rml]

Daar heb ik namelijk een soortgelijk iets gemaakt en geïmplemteerd. Let wel op dat die code IE only is, aan jou dan de schone taak om dat even crossbrowser te maken

_{Overigens kan je dit beter via layers, stylesheets, e.d. oplossen dan gebruik te maken van tables}

[Verwijderd]

Je kan Cross-browser.com natuurlijk ook even met een bezoekje vereren.

[Verwijderd]

wacco: wat jij daar hebt heb ik al, ik wil alleen nog een stapje verder. Ik wil namelijk dat als je 1 open hebt staan en dan op 2 klikt, 1 weer dicht gaat! en dat wil nou niet lukken.

Woudloper: dat script wat daar genoemd word komt op hetzelfde neer als die site van wacco.

En bij die hotscripts.com staan wel een hoop manieren om menuutjes te bouwen maar ook niet wat ik nou wil.

En Martijn 22: moet ik dat stukje code nou bij dat stukje java-script plakken of in de link van elk hoofdonderwerp toevoegen met onblur event? of beide?

[D-Three]

Ik heb er dit van gemaakt. Het werkt maar ik ben er zeker van dat het beter kan.

code:

<script language="javascript">
<!--

//Expands and contracts the menu (if in Internet Explorer 4.0 or higher) 
function change(){
    if(!document.all)
        return

    if (event.srcElement.className == "expandable1"){
        x=event.srcElement.parentElement

        if (x.all[2].style.display=="none"){
            pColl = document.all.tags("P");
            for (i=0; i<pColl.length; i++){
                if (pColl(i).className == "subsection"){
                    pColl(i).style.display = "none";
                }
            }
            x.all[2].style.display="block";
        }
        
        else
            x.all[2].style.display="none"
    }
} 
document.onclick=change 

//-->
</SCRIPT>

<table width="120" border="0" cellspacing="2" cellpadding="0" rules="rows">
  <tr>
    <td class="mainsection">

      <a class="expandable1" href="#">Landbouw</a>
      <br>

      <p class="subsection" style="display:none">
        <a href="producten/PL_tractoren.htm" target="mainFrame">Tractoren</a>
        <br>
        <a href="producten/PL_Combines.htm" target="mainFrame">Combines</a>
        <br>
        <a href="producten/PL_Ploegen.htm" target="mainFrame">Ploegen</a>
        <br>
        <a href="producten/PL_Maaiers.htm" target="mainFrame">Maaiers</a>
        <br>

      </p>
    </td>
  </tr>
</table>

<hr width="120">

<div align="center"></div>

<table width="120" border="0" cellspacing="2" cellpadding="0" rules="rows">
  <tr>
    <td class="mainsection">
      <a class="expandable1" href="#">Tuinbouw</a>
      <br>

      <p class="subsection" style="display:none">
        <a href="producten/PT_Gazonmaaiers.htm" target="mainFrame">Gazonmaaiers</a>
        <br>
        <a href="producten/PT_Zitmaaiers.htm" target="mainFrame">Zitmaaiers</a>
        <br>
        <a href="producten/PT_Tractoren.htm" target="mainFrame">Tractoren</a>
        <br>
      </p>
    </td>
  </tr>
</table>

[ Voor 0% gewijzigd door D-Three op 01-11-2002 12:13 . Reden: Je kan het trouwens op verschillende manieren oplossen, de ene al beter, sneller of korter dan de andere. Ik prefereer trouwens ook het gebruik van stylesheets en layers. Alhoewel, ik ben er ook geen expert in :) ]

[crisp]

Je zit op de goede weg, hopelijk begrijp je ook wat je code precies doet.
Wat mij nog dwarszit is het feit dat je alleen het document.all model ondersteund; dit is een antieke document model implementatie van Microsoft, dus werkt ook alleen maar in IE (dankzij backwards compatibility); verdiep je eens in het DOM model, met wat simpele aanpassingen kan je dit script ook geschikt maken voor bijvoorbeeld de nieuwste Netscape en Mozilla browsers

[D-Three]

crisp schreef op 01 november 2002 @ 12:17:
Je zit op de goede weg, hopelijk begrijp je ook wat je code precies doet.
Wat mij nog dwarszit is het feit dat je alleen het document.all model ondersteund; dit is een antieke document model implementatie van Microsoft, dus werkt ook alleen maar in IE (dankzij backwards compatibility); verdiep je eens in het DOM model, met wat simpele aanpassingen kan je dit script ook geschikt maken voor bijvoorbeeld de nieuwste Netscape en Mozilla browsers

Sorry, Marco_J, ik ga hier ff offtopic
Als ik dat DOM-model gebruik, werkt dat dan zowel onder IE, NS, Mozilla en andere?

[crisp]

Laagvliegerke schreef op 01 november 2002 @ 12:25:
[...]


Sorry, Marco_J, ik ga hier ff offtopic
Als ik dat DOM-model gebruik, werkt dat dan zowel onder IE, NS, Mozilla en andere?

IE5+, NS6+ en Mozilla ondersteunen het DOM model, IE4 het document.all model, en NS4 gebruikt het document.layers model. Opera is een beetje hybride (meer afgekeken van Microsoft) en ondersteund zowel document.all als DOM (zij het gedeeltelijk) maar ik ben niet op de hoogte vanaf welke versie.

[Verwijderd]

Thanx Laagvliegerke, ik heb geen idee wat dat extra stukje code nou doet maar het werkt!
maar voor zover ik het nu begrijp heb je in ieder geval onderscheid gemaakt tussen de main en subsection, maar verder snap ik het niet.

Maar wat ik ook al in het begin zij, ik heb totaal geen kaas gegeten van java.
En crisp als ik de tijd ervoor heb zal ik me zeker eens verdiepen in java en dan kom ik dat DOM model vanzelf wel tegen denk ik.

Alvast bedankt voor de reacties!

[Alarmnummer]

http://www.alarmnummer.net En java != javascript!!!

[Verwijderd]

Oeps, wat ik net schreef sloeg nergens op. Het moet dit zijn:

code:

x=document.getElementsByTagName('div');
y=new Array();
var temp=0;
for (i=0;i<x.length;i++){
if (x[i].className=='expandable1'){y[temp]=x[i];temp++;};
}
for (i=0;i<y.length;i++){
y[i].onblur=y[i].style.display='none';
y[i].onfocus=y[i].style.display='block';
}

Zet deze code aan het eind van je document.

[Alarmnummer]

Als jullie nu gewoon even op mijn site kijken. Daar staat een XML/XSLT bestanden waarmee je html boomstructeren mee kan genereren. Veel makkelijker (en veiliger) dan jullie aanpak.

[Verwijderd]

Alarmnummer, hoe genereer je de html output? Met XSelerator? Mozilla kan het xml-bestand trouwens al meteen renderen (misschien IE6 ook?)
Lijkt me trouwens best wel moeilijk om te leren, XSLT.
Ik zie de voordelen tov CSS/DOM niet zo 1,2,3. Wel een nadeel: moeilijk om te leren.
Zou je mij wat toepassing/voordelen van XSLT kunnen geven?

[Verwijderd]

Dit is een erg elegante oplossing: http://www.gazingus.org/dhtml/?id=109.
Het enige wat je hoeft te doen is het bouwen van de tree als een unordered list en een init-sequence te maken. Met een beetje coden kun je dat laatste er ook wel uit slopen...

[Verwijderd]

Verwijderd schreef op 01 november 2002 @ 14:15:
Ik zie de voordelen tov CSS/DOM niet zo 1,2,3.

Volgens mij begrijp je het niet helemaal. XSLT wordt alleen gebruikt om de HTML te genereren (waarschijnlijk vanuit een XML-database file). Alles wat daarna gebeurt in de browser is natuurlijk nog steeds DOM/CSS.

[Verwijderd]

Ik de voordelen er ook niet van in, tenopzichte van mijn doel.
Want al die voorbeelden die ik daar zie, daar worden de andere menu-items nog niet automatische gesloten op het moment dat ik een ander hoofdstuk kies.

maakt mij verder ook niet zo uit nu, want ik ben al lang blij dat het werkt dankzij Laagvliegerke

[Verwijderd]

Marco_J, ik snap dat jij al lang blij bent dat je in- en uitklapbare menu werkt. Als je nu ook een beetje gaat stoeien met document.getElementsByTagName en e.currentTarget en nog wat gaat zoeken hoe dat werkt, dan krijg je het ook nog aan de praat in Mozilla. Zou dat niet geweldig zijn?

Blues, met welk programma wordt het gegenereerd dan?
Met de generated source bookmarklet krijg ik de gegenereerde html-source wel te zien van de xml-file in Mozilla, maar er zijn toch zeker andere programma's voor?

[henkleerssen]

kijk op mijn site.. werkt het prima.. voor alle browser.. jatten mag
www.microarray.nl

[Verwijderd]

Verwijderd schreef op 01 november 2002 @ 15:12:
Blues, met welk programma wordt het gegenereerd dan?

Dat kan vanalles zijn. Vaak wordt Sablotron gebruikt (i.c.m. bijvoorbeeld PHP).

[henkleerssen]

MarcoJ... kom jer uit?

[Verwijderd]

Ik heb door hoe het opgebouwd is maar wat die stukken codes in dat javascript doen weet ik nog niet, heb nu ook helaas geen tijd om dat nu helemaal te gaan uitzoek, dus dat doe ik van het weekend wel.

ziet er trouwens wel netjes uit dat menu. En wat wel fijn is dat het ook werkt in mozilla en andere browsers.

[henkleerssen]

Verwijderd schreef op 01 november 2002 @ 16:05:
Ik heb door hoe het opgebouwd is maar wat die stukken codes in dat javascript doen weet ik nog niet, heb nu ook helaas geen tijd om dat nu helemaal te gaan uitzoek, dus dat doe ik van het weekend wel.

ziet er trouwens wel netjes uit dat menu. En wat wel fijn is dat het ook werkt in mozilla en andere browsers.

precies .. jat ze.. van het weekend..
Ik heb het zo clean mogelijk gehouden... ook om andere te laten jatten...Als je vragen hebt hoor ik het wel (ben niet in het weekend bereikbaar btw...). Ben benieuwd naar het resultaat...

[Verwijderd]

Je kan al ff zien hoe het eruit ziet met dat andere scriptje van Laagvliegerke.

http://192.9.100.175/tramper/
en dan onder het kopje producten!

(opmerking zijn ook welkom hoor)


Edit:

Zet hem wel op een internet server van het weekend!
hoor ik de reacties maandag wel.

[henkleerssen]

Verwijderd schreef op 01 november 2002 @ 16:28:
Je kan al ff zien hoe het eruit ziet met dat andere scriptje van Laagvliegerke.

http://192.9.100.175/tramper/
en dan onder het kopje producten!

(opmerking zijn ook welkom hoor)

IP nummer lijkt op een eigen netwerk.. en ik kan er niet op.. dus.. Maar ik ben geinteresseerd op eindresultaat.. ik wacht af..

[D-Three]

Verwijderd schreef op 01 november 2002 @ 14:15:
Alarmnummer, hoe genereer je de html output? Met XSelerator? Mozilla kan het xml-bestand trouwens al meteen renderen (misschien IE6 ook?)
Lijkt me trouwens best wel moeilijk om te leren, XSLT.
Ik zie de voordelen tov CSS/DOM niet zo 1,2,3. Wel een nadeel: moeilijk om te leren.
Zou je mij wat toepassing/voordelen van XSLT kunnen geven?

Verwijderd schreef op 01 november 2002 @ 14:32:
Dit is een erg elegante oplossing: http://www.gazingus.org/dhtml/?id=109.
Het enige wat je hoeft te doen is het bouwen van de tree als een unordered list en een init-sequence te maken. Met een beetje coden kun je dat laatste er ook wel uit slopen...

Verwijderd schreef op 01 november 2002 @ 14:36:
[...]

Volgens mij begrijp je het niet helemaal. XSLT wordt alleen gebruikt om de HTML te genereren (waarschijnlijk vanuit een XML-database file). Alles wat daarna gebeurt in de browser is natuurlijk nog steeds DOM/CSS.

Ik snap totaaaaaaal niet waar jullie over bezig zijn... Een tijdje terug heb ik nog wel iets gemaakt met XML maar ik ben er eerlijk gezegd al weer veel te veel van vergeten... En daarbij, ik zou beter gaan slapen, misschien dat ik deze namiddag al wat meer bij m'n zinnen ben

[shlammod]

henkleerssen schreef op 01 november 2002 @ 15:13:
kijk op mijn site.. werkt het prima.. voor alle browser.. jatten mag
www.microarray.nl

Deze werkt niet bij mij met Netscape 7

[Verwijderd]

Nuttig topic

[henkleerssen]

shlammod schreef op 06 november 2002 @ 15:21:
[...]


Deze werkt niet bij mij met Netscape 7

strange.. .. kun je me een screenshotje geven... van hoe deze niet werkt dan? Klapt totaal niet uit of zo? maar eigenlijk ook...hoeveel mensen gebruiken netscape 7...

[wacco]

Verwijderd schreef op 01 november 2002 @ 11:49:
wacco: wat jij daar hebt heb ik al, ik wil alleen nog een stapje verder. Ik wil namelijk dat als je 1 open hebt staan en dan op 2 klikt, 1 weer dicht gaat! en dat wil nou niet lukken.

Ghe, lol. Zo zag het script er namelijk eerst uit. Dat heb ik er toen voor deze pagina weer uitgesloopt.
Kijk maar eens op deze brakke thinkquest pagina.
Ook by me dus...
En het werkt niet helemaal handig doordat alle vars moeten doorgegeven worden, maar ik denk dat het in combinatie met de eerder gegeven link wel helemaal 1337 gemaakt kan worden

[henkleerssen]

Marco_J> Je kunt ook eens kijken op bratta site.. heel goede site voor dhtml (ook een van de eerste) .. zijn voorbeeld slidemenu2: http://www.dhtmlcentral.com/script/script.asp?id=32