[js] Slide menu werkt ten dele

[Foutlook]

Ik heb een simpel js-script geschreven wat ervoor zorgt dat een menu geshowed wordt (display op block) en naar beneden slide. De style.top elke keer eentje ophogen tot een bepaalde waarde.

Het werkt opzich goed in IE en Firefox (het ding slide naar beneden) maar het begint in beiden verkeerd. Het menu moet beginnen met een negatieve style.top. En via alerts zie ik elke keer dat hij begint bij 63px en doorgaat tot 104px. (die 104px is dus goed, daar moet hij stoppen, maar hij moet beginnen bij -50px.

JS:

code:

function Slide() {

    if (!i) i = -50;
    
    if (i < 105)
    {
        document.getElementById('box').style.display = 'block'; 

        document.getElementById('box').style.top = i + 'px';
        //alert(i);

        i++;

        
        setTimeout('Slide()', 8);
    }   
}

Ik heb het vage vermoeden dat ik wat verkeerd doe/wat vergeet maar wat?

[NMe]

Ik heb het vage vermoeden dat jij niet weet wat loops zijn, aangezien ik er in jouw functie geen zie.
Nevermind, recursie over het hoofd gezien. Dit werkt echter ook.

JavaScript:

function Slide() {

    var i;

    document.getElementById('box').style.display = 'block';    
    
    for (i = -50; i < 105; i++)
    {
        document.getElementById('box').style.top = i + 'px';
    }    
}

Dat moet je eenmalig aanroepen, en dan werkt het wel waarschijnlijk.

[ Voor 48% gewijzigd door NMe op 24-12-2004 10:20 ]

[André]

code:

var i = -50;
function Slide()
{
  document.getElementById('box').style.display = 'block';    
  
  if (i < 105)
  {
    document.getElementById('box').style.top = i + 'px';
    //alert(i);
    i++;
    setTimeout('Slide()', 8);
  }    
}

-NMe- schreef op vrijdag 24 december 2004 @ 10:19:
Ik heb het vage vermoeden dat jij niet weet wat loops zijn, aangezien ik er in jouw functie geen zie.

Die setTimeout zorgt voor de loop
Dat had je dus al door, maar je nieuwe script heeft geen vertraging en is dus geen mooie slide

[ Voor 56% gewijzigd door André op 24-12-2004 10:21 ]

[NMe]

André schreef op vrijdag 24 december 2004 @ 10:19:
Die setTimeout zorgt voor de loop
Dat had je dus al door, maar je nieuwe script heeft geen vertraging en is dus geen mooie slide

Dat zit er ook snel genoeg in. Ik ben niet zo'n voorstander van variabelen gebruiken in global scope, al is dat bij Javascript niet zo boeiend.

[Foutlook]

@NME: zoals al gezegd had ik daar de setTimeout voor. Je tweede script wordt idd als een blok neergezet, zonder mooie slide.

@Andre: jouw script werkt nog steeds hetzelfde als mijn script. Als ik de uitgecommentarieerde alert aanzet, begint ie bij 62px......

Wat kan dat toch zijn?

[ Voor 9% gewijzigd door Foutlook op 24-12-2004 10:28 ]

[André]

Foutlook schreef op vrijdag 24 december 2004 @ 10:25:
@Andre: jouw script werkt nog steeds hetzelfde als mijn script. Als ik de uitgecommentarieerde alert aanzet, begint ie bij 62px......

Dan is er iets anders aan de hand, het script is goed. De i word op -50 gezet en kan dus nooit op 62 beginnen. Gebruik je de i nog ergens anders?

[Foutlook]

André schreef op vrijdag 24 december 2004 @ 10:32:
[...]

Dan is er iets anders aan de hand, het script is goed. De i word op -50 gezet en kan dus nooit op 62 beginnen. Gebruik je de i nog ergens anders?

Je hebt helemaal gelijk, excuses. Ik had wat conflicten met andere 'i'-tjes Ik heb de var maar hoogte genoemd en toen ging het goed. Bedankt!

[faabman]

-NMe- schreef op vrijdag 24 december 2004 @ 10:24:
[...]

Dat zit er ook snel genoeg in. Ik ben niet zo'n voorstander van variabelen gebruiken in global scope, al is dat bij Javascript niet zo boeiend.

Foutlook schreef op vrijdag 24 december 2004 @ 10:33:
[...]


Je hebt helemaal gelijk, excuses. Ik had wat conflicten met andere 'i'-tjes Ik heb de var maar hoogte genoemd en toen ging het goed. Bedankt!

dan gebruik je geen global variabele maar voeg je via setAttribute() een waarde toe aan het element wat je aan het sliden bent...

edit:
ook van toepassing op de opmerking van de TS

[ Voor 30% gewijzigd door faabman op 24-12-2004 10:38 ]

[André]

faabman schreef op vrijdag 24 december 2004 @ 10:37:

dan gebruik je geen global variabele maar voeg je via setAttribute() een waarde toe aan het element wat je aan het sliden bent...

edit:
ook van toepassing op de opmerking van de TS

Dat attribuut heeft het element al: style.top

[faabman]

André schreef op vrijdag 24 december 2004 @ 10:42:
[...]

Dat attribuut heeft het element al: style.top

hmmm, faabman heeft meer koffie nodig