[JS] Meer DIVs showen en Hiden met Javascript?

[Verwijderd]

Hey iedereen,

Ik had een vraagje over een stukje javascript.
Ik ben er niet zo heel bekend mee maar ik heb het volgende scenario:
Ik heb een paar divs die altijd zichtbaar zijn (lets say 3 ofzo).
Dan heb ik nog wat andere div's die standaard NIET zichtbaar zijn.
Alla zoiets:

-Zichtbaar
-- Onzichtbaar
-- onzichtbaar
-Zichtbaar
--Onzichtbaar

etc. etc.

Nu wil ik dus dat als je een Mouse Over de zichtbare divs doet dat je de 'sub' divs als het ware ziet.
Dit kan al en werkt goed.
Alleen omdat het er vrij veel zijn wou ik dus arrays gebruiken om ook dynamisch de content van de onzichtbare te updaten of nog wat onzichtbare divjes er bij maken.

Maar nu krijg ik die array niet door mijn script heen.
Om zichtbaar en onzicht baar te doen heb ik het volgende:

JavaScript:

function Display(){
   document.getElementById('div').style.visible='visible';
}
function NoDisplay(){
  document.getElementById('div').style.visible='hidden';
}

HTML:

<div id="div1" onMouseOver="Display()" onMouseOut="NoDisplay">Zichtbaar</div>
<div id="div">Hoi!</div>

iemand die hier aan toevoegen kan dat ik met arrays werken kan of iets wat daarvan in de buurt komt?
Alvast bedankt
-Bryan

[BasieP]

google eens op getElementsByTagName
Daar komt een array uit van divjes.

Als je nesting wil van divjes. Nest ze dan ook
Dus niet

HTML:

<div></div>
<div></div>

maar

HTML:

<div>
  <div>
  </div>
</div>

Verder raad ik aan om 'display:none' en 'display:block' te gebruiken ipv visible. Maargoed das een andere zaak.

[ Voor 29% gewijzigd door BasieP op 04-08-2009 17:38 ]

[Zoefff]

Naast het feit dat de property "visibility" heet, en niet "visible"

Kan je niet -veel eenvoudiger- de structuur zo opbouwen dat je het tonen en verbergen van elementen via de :hover state van het element kan doen? Wat moet het precies worden?

[Verwijderd]

Bedankt voor de snele reply.
Oke, ik zal ze even nesten, maar getelementsbytagname ga je toch op <div> zoeken?
Maar ik gebruik meer divjes als alleen de divjes waar van ik de onmouse overs wil.
En kan ik met die getelementsbytagname wel arrays gebruiken of?

[Verwijderd]

Het moet een soort van vertikale drop down menu worden om het maar zo even te noemen.
en hoe zou ik dat met hover moeten doen dan?

[disjfa]

zo?

[Verwijderd]

iets in die richting alleen dan met divjes.

[disjfa]

Dan vervang je de tags.

[Verwijderd]

helpt niet veel, hij laat mijn divjes niet onder elkaar zien (de sub divjes) maar opelkaar...

[Zoefff]

Tijd om je dan daadwerkelijk even te verdiepen in de materie?

Het concept van de 'suckerfish dropdowns' is vrij simpel doch elegant. De basis is dat je een element hebt, met daarin het element dat je wilt tonen tijdens een mouseover. Met absolute positionering van dat tweede element kan je zorgen dat het onder het parent element getoond wordt.

In een simpele div-opzet krijg je dan dus iets als:

HTML:

<div>
    Lalala, dingen.
    
    <div>
        Lalala, meer dingen on mouseover.
    </div>
</div>

Cascading Stylesheet:

div {
    position: relative;
}

div > div {
    display: none;
}

div:hover > div {
    display: block;
    position: absolute;
    top: 20px;
    left: 0;
}

De nested div wordt nu tijdens een :hover 20 pixels lager t.o.v. de bovenkant van de parent gepositioneerd.

Uiteraard is bovenstaand codevoorbeeld slechts om het concept te verduidelijken. De semantische waarde van een div is niets, en kan in een menustructuur beter vervangen worden door bijvoorbeeld een ul. Daarnaast werkt de child-selector en :hover op elementen anders dan a niet in IE6, maar daar zijn uiteraard oplossingen voor te verzinnen die volgens mij ook in bovenstaand artikel genoemd worden.