[js] dynamische dropdown

[Verwijderd]

In onderstaand script heb ik getracht een soort van drop downmenu te maken. Het werkt een heel klein beetje. Maar er is een conflict waarschijnlijk tussen de setTimeout van beide functies. Ik heb een knopje 'link', en als ik daar met mijn mous over ga komt er een layer te voorschijn die zich van 0 tot 300px hoogte uitschuift. Bij de onmouseout wordt de laag weer ingeschoven. Ga ik de functie van onmouseout in voordat de layer volledig is uitgeschoven kan er een conflict ontstaan en gaat de layer staan fibreren.. en dat komt denk ik dus door het gebruik van setTimeout, maar hoe is dat te verhelpen???

En nog iets watie niet goed doet: als er bijvoorbeeld vijf regels in staan dan laatie gelijk de vijf regels zien en daarna pas schijft het menu zich vloeiend uit tot 300px hoogte. Hoe is dit te ondervangen? Moet ik het gewoon heel anders aanpakken om zo'n menu te maken? Iedere tip is welkom!

code:

hier stond oude code...

[ Voor 44% gewijzigd door Verwijderd op 30-01-2003 23:16 ]

[FlowDesign]

Waarom opnieuw het wiel uitvinden?
Er zijn zat sites waar dit soort dingen op staan (uitgelegd).

bijv. www.dhtml.com ofzo...

[Verwijderd]

Omdat ik het leuk vindt om te zien hoe het werkt, om iets meer van js te leren en omdat ik graag wil dat ik op een website verschillende menu's kan combineren etc

daarom dus...

[Bosmonster]

de functie setTimeout geeft een pointer terug, deze kun je afvangen. Dit is nodig omdat je ook timeOuts moet kunnen cancellen met clearTimeout(timeout).

zorg dat je je timeout cancelled voordat je een nieuwe begint en je probeleem is grotendeels opgelost, nu gaat er voor elke onmouseover en onmouseout een nieuwe timer lopen En dit blijft oneindig doorgaan.

[ Voor 42% gewijzigd door Bosmonster op 29-01-2003 16:51 ]

[Verwijderd]

Bosmonster schreef op 29 January 2003 @ 16:50:
de functie setTimeout geeft een pointer terug, deze kun je afvangen.

't Is zelfs gewoon een Integer (type Number)....

[Verwijderd]

Dat werkt nu perfect bij mij, bedankt voor de tip. Ik cancel de timeout van de onmouseover in de functie van onmouseout en andersom ook. Ik weet niet of dat de juiste en beste manier is, maar het werkt goed!

VOORBEELD OP http://www.revasa.nl/menu.html

Toch nog even aandacht voor de twee andere kleine dingetjes waar ik problemen mee heb:
1. Bij het uitschijven van de layer springt hij eerst op zo'n plus/minus 18 px hoogte (ik denk dat dat één regel hoogte is of zo) en daarna schuiftie pas vloeiend uit, waar kan dat aan liggen...
2. Het tweede probleem is ongeveer hetzelfde als de eerste. Zet ik namelijk bijvoorbeeld drie woorden in m'n div dan klapt in een keer dat stuk uit waar de waarde in staan en daarna na een fractie van een seconde schuift de rest er pas uit... hoe is dit te ondervangen???

Dit is de huidige bron van het stukje js:

code:

hier stond oude code

[ Voor 80% gewijzigd door Verwijderd op 30-01-2003 23:16 . Reden: bron nog ff toegevoegd... ]

[Verwijderd]

Ik hoop dat Mozilla compatibility geen eis is want in Moz1.2.1 doet ie het niet. In IE5.5 prima. hint: document.notsoall.

over punt 1: Je zou kunnen kijken wat ie doet als je hem een hoogte geeft van 1px ipv 0, kan me voorstellen dat een browser zich dan afvraagt hoe die dat moet renderen. Als dat niet werkt nog kijken of hij zich wel goed gedraagt als je er een 1px hoge gif in zet. (niet ideaal maar om te proberen of het helpt.)

over punt 2: Ik denk dat je je daarvoor eens moet verdiepen in de clip property.
http://www.w3schools.com/css/pr_pos_clip.asp

[Verwijderd]

Zou je niet ipv document.all.... document.getElementById('laagje').style.visibility = "visibible" doen?

En ik weet niet hoe dat zit in Javascript enzo met recursi. Maar is het niet vreemd om eerst je layer helemaal groot te maken en hem dan pas te laten zien? Nou ja, zal al mij liggen.

[ Voor 52% gewijzigd door Verwijderd op 30-01-2003 11:57 ]

[Verwijderd]

Die clip property was een goeie tip! Het werkt nu geheel vloeiend. Nog een laatst klein dingetje... Je kan normaal gesproken een variabele doorsturen naar een functie, zo ook het id van de layer zodat je op die manier meerdere layers kan aansturen door een functie. Maar dat gaat dus niet lukken met deze functie... Is daar een reden voor? Ik heb zo'n beetje alles geprobeerd (zelfs zo dat mn browser vast liep ) Hieronder mn laatste versie...

code:

hier stond oude code...

[ Voor 56% gewijzigd door Verwijderd op 30-01-2003 23:15 ]

[Verwijderd]

Ik ben toch weer verder gekomen, het was niets meer dan enkele quote plaatsen om de variabele die mee gegeven werd in de functie die in setTimeout staat. Beetje slordig dat ik dat niet gezien had! Ik alle bovenstaande code weggehaald en de nieuwe laatste versie hieronder gezet. De link hieronder wijst naar het werkende voorbeeld.

voor een enkel voorbeeld:: http://www.revasa.nl/menu2.html (werkt in IE5.5 en NN6.x voor zover ik weet...)

Het volgende probleem vraagt toch om iets meer expertise... Stel ik wil twee of meer dropdown's gebruiken via deze functies, dan krijg je dus conflicten... Als de ene nog aan het 'inscrollen' is ga je een tweede andere laten openen waardoor de layer is wordt overschreven... Op wat voor manier kan je ten alle tijden het 'inscrollen' op de achtergrond door laten gaan??? Iemand een tip of denkrichting??

PHP:

<script type="text/javascript">
<!-- 
var timeout1;
var timeout2;
var clipTop = 0;
var clipRight = 150;
var clipBottom = 0;
var clipLeft = 0;

function maakGroter (layerid){
    clearTimeout(timeout2);
    var target = document.getElementById(layerid);
    document.getElementById(layerid).style.visibility = "visible";
        if (clipBottom != 150){         
            clipBottom = clipBottom + 10;
            target.style.clip = "rect(" + clipTop + "px, " + clipRight + "px, " + clipBottom + "px, " + clipLeft + "px)";
            timeout1 = setTimeout("maakGroter('"+layerid+"')", 5);
        }
}

function maakKleiner (layerid){
    clearTimeout(timeout1);
    var target = document.getElementById(layerid);
        if (clipBottom != 0){   
            clipBottom = clipBottom - 10;
            target.style.clip = "rect(" + clipTop + "px, " + clipRight + "px, " + clipBottom + "px, " + clipLeft + "px)";
            timeout2 = setTimeout("maakKleiner('"+layerid+"')", 5);
        }
        else {
        document.getElementById(layerid).style.visibility = "hidden";
        }
}
-->
</script>

[ Voor 10% gewijzigd door Verwijderd op 30-01-2003 23:28 . Reden: ff melden in welke browsers het werkt... Je mag aanvullen... ]

[Verwijderd]

doorgaand op voorgaande problemen die opgelost zijn ben ik vanochtend bezig geweest met het oplossen van het probleem wat in het bericht hierboven beschreven staat. Ik zat zelf te denk om in een for-lusje in de functie maakGroter() alle layers behalve de layer waar de muis op staat in te laten schuiven. Daar kwam ik niet verder mee. Het resultaat was dat mn layer direct sloot omdat ik de waarde kwijt was van mn clipBottom. Opzich logisch. Ongeveer hetzelfde heb ik ook gebruikt in mn functie maakKleiner met ook ongeveer hetzelfde resultaat.
Heeft iemand nog verhelderende ideeën of ben ik helemaal op het verkeerde spoor bezig en moet ik dit probleem op een heel andere manier uitwerken. Het voorbeeld staat op http://www.revasa.nl/menu2.html (enkele dropdown)

@mod, kan misschien in de titel JS in DHTML veranderd worden???

[Verwijderd]

Je zou achter al je uitschuivende layers een object kunnen hangen met properties als de clipwaarden, het id van de div waar het omgaat, de achtergrondkleur enz.

Dat object voorzie je dan ook van methods (prototypes) zodat je zoiets kunt doen als menu1.klapin().

Als je dan je verschillende menu-objecten geen losse namen geeft maar in een array stopt,. dus menuArray[0], menuArray[1], enz. dan kun je daar makkelijk doorheen lopen met een loop.

de knop van het 2e pulldown-menu zou dan iets kunnen hebben als:

onmouseover="mouseOver(1);"

waarbij de functie iets is als:

PHP:

function mouseOver(i) {
  for (j=0;j<menuArray.length;j++) {
     if (i==j) {
        menuArray[j].klapUit();
     } else {
        menuArray[j].klapIn();
     }
  }
}

Alles onder voorbehoud van fouten.

Je kunt ook gewoon meer globale variabelen maken uiteraard maar afhankellijk van hoeveel pulldowns je van plan bent te maken kan dat vrij chaotisch worden.

[Verwijderd]

Das een beter idee dan dat ik uiteindelijk verzonnen heb. Op http://www.revasa.nl/menu3.html staat het werkende script wat ik zelf heb geknutseld.... op dit moment alleen IE proof, sorry .

Ik denk dat jou idee (Type-O) een beter idee is dan dat wat ik nu heb... zeker met wat meer dropdown menuu's wordtie van mij ook errug groot. Dan ga ik daar maar eens verder op door.

[Verwijderd]

En lukt ie al een beetje ? Ikzelf ben namelijk erg benieuwd naar zo'n scriptje om m'n eigen Intersite eens correct te laten weergeven in Opera. Internet Explorer geeft 'm perfect weer, incl. pulldown menutjes, maar Opera geeft alleen de bovenste balk weer...geen uitklapmenutjes helaas

[ Voor 9% gewijzigd door Verwijderd op 02-02-2003 16:09 ]