[JS] Mijn dynamisch menu 'past niet' :(

[Verwijderd]

Hoihoi, ik ben al uren bezig met een menusysteem en het wilt maar niet lukken. Ik hoop echt dat jullie me kunnen helpen.

Het zit zo: ik heb een javascript menu wat met een effect uitklapt als je erop klikt. Met IE6 werkt alles prima, maar in Firefox en Opera rekt de DIV-container niet uit, met als gevolg: overflow. Ik wil dat de DIV automatisch zijn hoogte aanpast zodat alles 'er in past'. IE lijkt dit automatisch te doen, ik heb het idee dat Firefox en Opera de specs volgen en ik 'iets moet doen' om het werkend te krijgen zoals ik wil.

Ik heb een testcase gemaakt zodat jullie kunnen zien wat ik bedoel:
http://83.68.3.169/menu/

1) Klik op een hoofdmenu "Menu1" of "Menu2"
2) Klik op "Submenu1" of "Submenu2"

Zoals je ziet met IE wordt de DIV-container langer, hij groeit mee. Bij Firefox en Opera niet. Ik zou graag tips/oplossingen hebben om het in alle drie de browsers te laten werken. Ik denk dat dit met Javascript moet maar als jullie iets met CSS weten is dat helemaal mooi natuurlijk.

Heel erg bedankt alvast!

[Michali]

Het is net ff te veel code om allemaal door te nemen, maar ik gok dat het komt omdat je een vaste hoogte geeft aan het menu element. Als je het submenu dan uitklapt update je de hoogte van dat element wel, maar niet die van de container. Je moet dus bij uitklappen van je submenu ook de hoogte van alle parent menu items updaten. Ik hoop dat je er uit komt zo.

[Verwijderd]

De HTML en Stylesheet zijn toch heel kort? Ik neem aan dat er geen 'fout' zit in Prototype en de Effect Library. Het is puur dat ik in het uitklapmenu een tweede uitklapmenu wil en dat dat problemen geeft omdat de 2e DIV dan meer hoogte krijgt en de 1e DIV niet mee-uitrekt waardoor er overflow komt.

En ik gebruik geen vaste hoogte voor de container (1e DIV). Het grappige is dat als je het submenu laat uitklappen en je daarna op "Menu1" klikt, hij wel de goede hoogte uitrekent. Kennelijk moet hij de juiste hoogte voor de container DIV dus opnieuw - en dynamisch - berekenen.

Ik heb zelf al zitten spelen met dingen als

code:

document.getElementById("menu1").style.height = document.getElementById("menu1").clientHeight + document.getElementById("sub1").scrollHeight + "px";

Maar het probleem is dat als ik dit in de onclick-tag stop de hoogte van sub1 (het submenu) nog 0px is, omdat het is dichtgeklapt. Ik heb in de referenties geen functie/property gevonden om de hoogte van een overflowed-element of een element met display:none; te krijgen. Iemand die dit weet?

[Eusebius]

offtopic:
Ga je de code beschikbaar stellen ... lijkt me wel handig als het werkt ...

[crisp]

Haal die subnav division eens uit je paragraaf; een p-element mag geen andere blocklevel elementen bevatten (sowieso laat je markup behoorlijk te wensen over; persoonlijk zou ik hiervoor een list gebruiken met sublists).

[ Voor 35% gewijzigd door crisp op 04-11-2005 15:42 ]

[Verwijderd]

Eusebius schreef op vrijdag 04 november 2005 @ 15:38:

offtopic:
Ga je de code beschikbaar stellen ... lijkt me wel handig als het werkt ...

De prototype/effects javascript libraries zijn open source hoor. Kijk hier maar eens voor demo's:
http://wiki.script.aculo....ow/CombinationEffectsDemo

Echt wel toffe dingen kun je er mee doen. Maar ik heb niet het idee dat mijn probleem een bug is in deze twee libraries.

Het echte probleem is denk ik, dat ik de hoogte wil uitlezen van een DIV die hoogte:0px heeft of display:none. Dan zou je zeggen, dat klopt toch ook dat het 0 is. Maar ik wil weten hoe hoog die DIV zou worden als ik display:block; of height:auto; zou doen. Dus ik wil de hoogte van overflow weten. Tot nu toe heb ik drie hoogtes gevonden:

- clientHeight (hoogte van content)
- offsetHeight (hoogte van content + border)
- scrollHeight (hoogte van volledige content, ook als deze overflowed is door middel van een scrollbalk)

Alleen werkt scrollHeight nou weer niet als overflow:hidden; is of height:0. Jammer. Maar is er toch een manier?

[Verwijderd]

crisp schreef op vrijdag 04 november 2005 @ 15:41:
Haal die subnav division eens uit je paragraaf; een p-element mag geen andere blocklevel elementen bevatten (sowieso laat je markup behoorlijk te wensen over; persoonlijk zou ik hiervoor een list gebruiken met sublists).

Heb je het idee dat Firefox ze niet uitrekt hierdoor?

Ik heb nu op mn eigen computer de <P> </P> vervangen door een DIV. Geen verschil.

De "sub1" kan ik niet echt verwijderen, omdat ik een container moet hebben die ik kan verbergen en via Blinddown('<id_naam_van_element>') kan laten uitklappen. Dus of een P of een DIV, lijkt me.

Een <ul>-achtige list is idd een aardig idee. Maar ik vermoed dat ik tegen precies hetzelfde probleem zou aanlopen.

[crisp]

En als je die height: 0px; eens weghaald van je menux divs?

[Verwijderd]

crisp schreef op vrijdag 04 november 2005 @ 16:13:
En als je die height: 0px; eens weghaald van je menux divs?

Al geprobeerd; no luck.

Wat wel grappig is: als ik "height:auto; display:block" instel, dan is mn menu al uitgeklapt als ik f5 doe. Als ik dan het submenu uitklap dan gaat de DIV mee zoals ik wilde. Máár. als ik na f5 eerst een ander menu laat uitklappen en dan weer terugga en dan het submenu aanklik, dan komt de tekst weer buiten de kolom. Ik zit te denken dat dat javascript uitklap-effect de overflow van de DIV wel eens op overflow:visible; kan zetten ipv overflow:auto;

Eens stiekem de .js files aanpassen...

[Verwijderd]

Hm geen succes. Toch heb ik het idee dat het javascript uitklap-effect de hoogte van de container DIV op een 'statische' manier instelt en niet dynamisch zoals in eerste instantie gebeurt bij F5. Als ik zorg dat één van de menu's al open is en klik dan op submenu, dan klapt hij mooi open. Maar als ik op Menu1, Menu2, Menu3 klik dan zal het nooit meer mooi werken (in firefox/opera althans).

[ Voor 6% gewijzigd door Verwijderd op 04-11-2005 16:34 ]

[crisp]

prototype fiddelt idd met overflow en height voor zover ik kan zien; ergens gaat dat in dit geval dus niet helemaal lekker blijkbaar...

edit: een element met height: 0px heeft natuurlijk geen clientHeight, maar volgens mij lost prototype dat intern wel op. Blijkbaar is blindUp/blindDown gewoon niet geschikt om genest te worden.
Persoonlijk zou ik gewoon zelf een scriptje schrijven

[ Voor 53% gewijzigd door crisp op 04-11-2005 18:17 ]

[crisp]

Toch een fix: verander in effects.js regel 215 en 216 in dit:

JavaScript:

    if(this.options.scaleX) this.element.style.width = width == this.originalWidth ? 'auto' : width + 'px';
    if(this.options.scaleY) this.element.style.height = height == this.originalHeight ? 'auto' : height + 'px';

[Verwijderd]

Hij doet heeeetttttt!! Je bent een schat.

Sow echt tof, ga gelijk m'n menuutje in elkaar prutsen.
En mailtje naar de auteur van die Effects, kan hij misschien ook wel waarderen.