[JavaScript] uitklapbaar menu, crossbrowser compatibility

[posttoast]

Voor een site ben ik bezig met het maken van een uit- en inklapbaar navigatiemenu in javascript. Dit lukt op alle fronten aardig, alleen op het gebied van crossbrowser compatibility gaat het goed mis.

Allereerst even het voorbeeld, dat is hier te vinden.

Als je de site met Internet Explorer bezoekt is er niets aan de hand, het menu doet wat het moet doen. Met Opera gaat het echter mis: het menu begint in een uitgeklapte positie en wanneer je het inklapt gaat het goed mis met de blauwe achtergrond van de cel waarin het staat. In Mozilla werkt het menu helemaal niet: het is uitgeklapt en kan niet ingeklapt worden.

Hier het javascript:

code:

  <script language="javascript">
  <!--
   var Open = ""
   var Closed = ""

   function preload()
   {
    if(document.images)
    {
     OpenHoofd = new Image(12,12)
     ClosedHoofd = new Image(12,12)
     OpenSub = new Image(12,12)
     ClosedSub = new Image(12,12)
     OpenHoofd.src = "images/pijltje_hoofd_1.gif"
     ClosedHoofd.src = "images/pijltje_hoofd_0.gif"
     OpenSub.src = "images/pijltje_sub_1.gif"
     ClosedSub.src = "images/pijltje_sub_0.gif"
    }
   }

   function uitklaphoofd(what,what2)
   {
    if (what.style.display=='none')
    {
     what.style.display='';
     what2.src=OpenHoofd.src
    }
    else
    {
     what.style.display='none'
     what2.src=ClosedHoofd.src
    }
   }

   function uitklapsub(what,what2)
   {
    if (what.style.display=='none')
    {
     what.style.display='';
     what2.src=OpenSub.src
    }
    else
    {
     what.style.display='none'
     what2.src=ClosedSub.src
    }
   }
-->
  </script>

Zoals je kunt zien heb ik 2 functies aangemaakt, één voor de hoofdcategorieën en één voor de subcategorieën. Deze functies worden als volgt aangeroepen:

code:

<div class="productmenu_hoofdcat" id="menu1" style="cursor: hand">
 <div onClick="uitklaphoofd(menu1outline,menu1sign)">[img]"images/pijltje_hoofd_0.gif"[/img]Hoofdcategorie
</div>
<div id="menu1outline" style="display:'none'" class="productmenu_subcat">
 <div id="menu2" onClick="uitklapsub(menu2outline,menu2sign)" style="cursor: hand">
  [img]"images/pijltje_sub_0.gif"[/img]Subcategorie
 </div>
 <div id="menu2outline" style="display:'none'">
 <div class="productmenu_subsubcat"><a href="#" target="content">subsub 1</a></div>
 <div class="productmenu_subsubcat"><a href="#" target="content">subsub 2</a></div>
</div>

Wie o Wie kan mij vertellen waarom dit niet werkt in Opera en Mozilla? En hoe kan ik het wél laten werken?!

Sorry voor de layout verkloting trouwens...

[ Voor 14% gewijzigd door posttoast op 04-06-2003 16:32 ]

[Glimi]

Jaaavascript in W&G
Echter post er wel even bij wat je geprobeerd hebt, wat niet lukt, waar je denkt het aan ligt en wat je vind op www.echoecho.com

Succes

[posttoast]

Glimi schreef op 04 juni 2003 @ 16:33:
Jaaavascript in W&G
Echter post er wel even bij wat je geprobeerd hebt, wat niet lukt, waar je denkt het aan ligt en wat je vind op www.echoecho.com

Succes

Excuseer voor de verkeerde plaatsing, ik kwam er nét iets te laat achter!

Op echoecho was ik al geweest, en daar kon ik niet het script vinden dat ik zocht. Ik heb dit script met wat hulp zelf in elkaar geklust.

Ik heb hiervoor veel verschillende dingen geprobeerd, onder andere een oplossing in PHP, maar niets deed voor de volle 100% wat ik wilde (behalve een supercomplex javascript dat je kon kopen maar dat deed veel meer dan ik wil).

Waar ik denk dat het aan ligt? Nou, waarschijnlijk aan de ondersteuning van "display" door de andere browsers. Maar een andere, werkende, oplossing heb ik nog niet gevonden.

[twopack]

Heej ik zit met een vergelijkbaar probleem, jij doet zeker ook TCR-IR911?

Dat echoecho kende ik nog niet, ik ga daar ff kijken.

[tomato]

Laatst ook een keer nodig gehad (ben er zelf absoluut geen fan van, maar ja...) en ik heb die van BrainJar gebruikt, uiteraard geheel gerestyled.

http://www.brainjar.com

Mozilla, IE6, Opera 7 gaan in ieder geval allemaal goed. IE5 en IE5.5 hebben geloof ik moeite met de positionering...

[posttoast]

tomato schreef op 04 June 2003 @ 18:10:
Laatst ook een keer nodig gehad (ben er zelf absoluut geen fan van, maar ja...) en ik heb die van BrainJar gebruikt, uiteraard geheel gerestyled.

http://www.brainjar.com

Mozilla, IE6, Opera 7 gaan in ieder geval allemaal goed. IE5 en IE5.5 hebben geloof ik moeite met de positionering...

Bedoel je het menu dat op de site van BrainJar gebruikt wordt? Misschien heb ik niet genoeg verbeeldingskracht, maar hoe zou ik dat om kunnen vormen tot wat ik wil maken?

[Verwijderd]

door iets verder te lezen: http://www.brainjar.com/dhtml/menubar/

[posttoast]

Verwijderd schreef op 04 June 2003 @ 19:43:
door iets verder te lezen: http://www.brainjar.com/dhtml/menubar/

Die had ik gevonden ja. Maar dat is toch heel iets anders dan wat ik gemaakt heb? Of niet?

[Verwijderd]

Tip: open eens de JavaScript console van Mozilla.
Oplossing:

JavaScript:

// verander dit soort dingen
uitklaphoofd(menu1outline,menu1sign)
// in
uitklaphoofd('menu1outline','menu1sign')

// en in de functies
function uitklaphoofd(what,what2) {
// in
function uitklaphoofd(what_name,what_name2) {
    var what = document.getElementById(what_name);
    var what2 = document.getElementById(what_name2);

Misschien dat iemand anders je wil uitleggen waarom

[posttoast]

Verwijderd schreef op 04 June 2003 @ 20:28:
Tip: open eens de JavaScript console van Mozilla.
Oplossing:

JavaScript:

// verander dit soort dingen
uitklaphoofd(menu1outline,menu1sign)
// in
uitklaphoofd('menu1outline','menu1sign')

// en in de functies
function uitklaphoofd(what,what2) {
// in
function uitklaphoofd(what_name,what_name2) {
    var what = document.getElementById(what_name);
    var what2 = document.getElementById(what_name2);

Misschien dat iemand anders je wil uitleggen waarom

Dank, dit werkt inderdaad in Mozilla. Die variabelen moeten dus gedefinieerd worden zie ik nu. Ik dacht eerlijk gezegd dat javascript daar niet moeilijk in was. Maar: ik ben hier om te leren, dus dat is okay

Nu zit ik nog wel met het probleem dat het menu uitgeklapt begint in zowel Mozilla als Opera. Heeft iemand nog enig idee hoe ik dat moet fixen?

Toevoeging:

eigenlijk wil ik dus iets maken zoals op www.alternate.nl. Ik heb alleen geen idee hoe zij het gedaan hebben (bij hun werkt het wel in IE, Opera en Mozilla).

[ Voor 10% gewijzigd door posttoast op 04-06-2003 20:58 . Reden: Toevoeging ]

[tomato]

Vincent Bovelander schreef op 04 June 2003 @ 19:08:
Bedoel je het menu dat op de site van BrainJar gebruikt wordt? Misschien heb ik niet genoeg verbeeldingskracht, maar hoe zou ik dat om kunnen vormen tot wat ik wil maken?

Tsja, hoe had ik kunnen weten wat je daadwerkelijk bedoelde? Aan je voorbeeld kan ik niets zien en je gaf geen werkend voorbeeld.

Je bedoelt volgens mij eigenlijk een tree menu en over het algemeen denk ik bij uitklapbaar menu eerder aan de menuutjes zoals ik er een gaf.

[posttoast]

tomato schreef op 04 juni 2003 @ 21:23:
[...]

Tsja, hoe had ik kunnen weten wat je daadwerkelijk bedoelde? Aan je voorbeeld kan ik niets zien en je gaf geen werkend voorbeeld.

Je bedoelt volgens mij eigenlijk een tree menu en over het algemeen denk ik bij uitklapbaar menu eerder aan de menuutjes zoals ik er een gaf.

Excuseer, mijn opmerking was ook niet lullig bedoeld hoor! Het begon me wat later pas te dagen dat ik misschien niet helemaal duidelijk was, vandaar de verwijzing naar Alternate.

[tomato]

Vincent Bovelander schreef op 04 June 2003 @ 21:27:
Excuseer, mijn opmerking was ook niet lullig bedoeld hoor! Het begon me wat later pas te dagen dat ik misschien niet helemaal duidelijk was, vandaar de verwijzing naar Alternate.

Ok, dan is het nu in ieder geval duidelijk

[posttoast]

Ik ben weer wat verder: de reden dat hij standaard uitgeklapt stond in Mozilla en Opera was een aantal quotjes:

HTML:

<div class="productmenu_hoofdcat" id="menu1" style="cursor: hand">
 <div onClick="uitklaphoofd(menu1outline,menu1sign)">[img]"images/pijltje_hoofd_0.gif"[/img]Hoofdcategorie
</div>
<div id="menu1outline" style="display: none" class="productmenu_subcat">
 <div id="menu2" onClick="uitklapsub(menu2outline,menu2sign)" style="cursor: hand">
  [img]"images/pijltje_sub_0.gif"[/img]Subcategorie
 </div>
 <div id="menu2outline" style="display: none">
 <div class="productmenu_subsubcat"><a href="#" target="content">subsub 1</a></div>
 <div class="productmenu_subsubcat"><a href="#" target="content">subsub 2</a></div>
</div>

Het ging dus om de stukjes style="display: none", daar stonden in de eerste instantie enkele quotjes om none.

Dat is nu dus opgelost. Alleen werkt het nog niet goed in Opera 7.01 (daar klapt het ding überhaupt niet uit) en in Opera 7.11 gebeuren er vreemde dingen met de blauwe achtergrond.

[posttoast]

Hoezee, na het aanpassen van de frameset werkt het menu nu ook goed in Opera 7.11.

Het enige vreemde is dat het helemaal niet in Opera 7.01 werkt. Wie heeft enig idee waarom?

De pagina waar het om gaat staat nog steeds hier.

[Verwijderd]

Ook Opera 7 heeft een JavaScript console waar je foutmeldingen kunt bekijken...