Layerprobleempje

[tweakingrobbie]

Een layer-probleempje:

1. (Basisgegevens) Ik heb het volgende script:

code:

<script language="JavaScript" type="text/JavaScript">
<!--
function nav() {
  var i,p,v,obj,args=nav.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>

Verder heb ik een aantal layers voor de navigatie:

code:

<!-- Navigatie: contact -->
<div id="navcontact" style="left:67px; top:85px; width: 120px;" onMouseOver="nav('navcontact','','show')" onMouseOut="nav('navcontact','','hide')">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr><td><a href="index.php?id=21080321" title="E-mail">E-mail</a></td></tr>
  <tr><td><hr noshade></td></tr>
  <tr><td><a href="index.php?id=21080322" title="Online formulier">Online formulier</td></tr>
</table>
</div>

<!-- Navigatie: downloads -->
<div id="navdownloads" style="left:147px; top:85px; width: 120px;" onMouseOver="nav('navdownloads','','show')" onMouseOut="nav('navdownloads','','hide')">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr><td><a href="index.php?id=21080331" title="Freeware">Freeware</a></span></td></tr>
  <tr><td><hr noshade></td></tr>
  <tr><td><a href="index.php?id=21080332" title="Plug-ins">Plug-ins</a></td></tr>
</table>
</div>

En als laatste het navigatiemenu: (Dit is een klein deel van de keuzeitems)

code:

 <td><a href="javascript:;" class="nav" onMouseOver="nav('navcontact','','show')" title="Contact">Contact [img]"img/pijl.png"[/img]</a>[img]"img/spacer.gif"[/img]</td>
          <td><a href="#" class="nav" onMouseOver="nav('navdownloads','','show')" title="Downloads">Downloads [img]"img/pijl.png"[/img]</a>[img]"img/spacer.gif"[/img]</td>

2. (Toelichting) Met behulp van het bovenstaande script worden de layers getoond, als je over een van de navigatie links gaat. Ga je over Downloads, dan wordt de Downloads-layer getoond met daarin een aantal subopties. Als je van dit layer afgaat met de muis, wordt de visibilty weer ingesteld op hidden.

Het menu ziet er ongeveer zo uit:

Home | Contact | Downloads | Item4 | Item 5 | enz...

Alle items staan dus naast elkaar. Als men nu vanaf Contact met de muis in een rechte lijn naar rechts gaat, dus over Downloads, dan opent dit submenu zich ook, terwijl het Contact-submenu ook open staat.

3. (Vraag) Ik wil nu dus eigenlijk een optie, dat op het moment dat een van de layers visible wordt, alle andere layers hidden zijn. Heeft iemand een idee hoe je dat met zo min mogelijk code kan doen?
Ik kan het wel zo doen dat ik in het onMouseover-event bij bijv. Downloads voor elk layer apart een actie plaats onMouseover="nav('navlayernaam','','hide')" maar dat levert ontzettend veel code op. Hier heb ik dus weinig aan.

Alvast bedankt,
Robert

P.S. Ik weet zelf ook wel dat er honderden uitklapmenuutjes te downloaden zijn, maar ik wil er graag een zelf maken.

[ Voor 33% gewijzigd door tweakingrobbie op 22-08-2003 14:49 ]

[Thijsmans]

zet ze in een array, laat alle array-keys invisible worden en laat degene die moet blijven weer zichtbaar worden

[Verwijderd]

je layer object opslaan in een variabele en die vervolgens weer leeggooien

iets als:

JavaScript:

var currentLayer = false;

function klapUit(layer) {
  if (currentLayer) klapIn(currentLayer);
  layer.style.display = 'block';
  currentLayer = layer;
}

edit: en gooi je code effe in [code] tags en overbodige muk gewoon weg laten

[ Voor 16% gewijzigd door Verwijderd op 22-08-2003 14:45 ]

[Pelle]

* Pelle hanteert altijd dezelfde manier als Prammenhanger voor dit soort dingen

[Verwijderd]

wat is daar het voordeel van? je bent dan layers aan het hiden die al gehide staan, volgens mij is het dus netter om alleen het visible menu in een var op te slaan, want dat is het enige wat je nodig hebt.

(wat ik doe is een menu object met daarin steeds een array met submenu's, maar het huidig geselecteerde item stop ik wel iedere keer in een aparte var om hem direct aan te kunnen spreken)

offtopic:
dat icon, is dat nodig? nieuwe manier om newbies weg te jagen?

[ Voor 12% gewijzigd door Verwijderd op 22-08-2003 14:57 ]

[tweakingrobbie]

Pelle of Prammenhanger: zou je misschien een heel klein stukje specifieke voorbeeldcode kunnen geven? (Voor deze situatie)

[Pelle]

* Pelle niet

We gaan hier niet jouw problemen op zitten lossen... ga eerst zelf maar eens aan de slag

[crisp]

voorbeeldje:

JavaScript:

var open_menu = 0;  // welk menu staat er nu open?

function openmenu(num) {

  if (open_menu > 0) document.getElementById('menu'+open_menu).style.visibility = 'hidden';
  document.getElementById('menu'+num).style.visibility = 'visible';
  open_menu = num;

}

[Thijsmans]

Nee

Het idee is duidelijk, maak een array met daarin de namen van de div's, maak een loopje dat elke div uit die array bestylt naar niet zichtbaar/ingeklapt, en klap als laatst degene die is aangeroepen in de vars van de functie (bijv. onmouseover="showMenu('naamvdiv1');" -> 'naamvdiv1') wél uit.

Btw, het kortst mogelijke inklapmenu?

HTML:

<div style="width: 200px; border: 1px solid black; height: 16px; overflow: hidden;" 
onmouseover="this.style.height='90px';" onmouseout="this.style.height='16px';">
 <span class="menuitem_kop">&nbsp;Kop 1</span>
 <span class="menuitem_cont">link 1 <br> link 2 <br> link 3</span>
</div>

Maak ik nu kans op een prijs?

[Pelle]

Verwijderd schreef op 22 augustus 2003 @ 14:56:

offtopic:
dat icon, is dat nodig? nieuwe manier om newbies weg te jagen?

[tweakingrobbie]

Iedereen bedankt, het zal nu wel lukken .