Avatar billede mesteren_selv Nybegynder
12. juli 2009 - 21:23 Der er 4 kommentarer og
1 løsning

setTimeout loader med det samme

Hej Derude

Jeg forsøger at animere et tabel-felt i javascript så det vokser over et tidsrum:

<script type="text/javascript">
function init() {
    document.getElementById('overlay_body').style.height = '200px';
    document.getElementById('overlay_body').style.width = '200px';
}

function expand(e) {
    if ((parseInt(e.style.width)<500) && (parseInt(e.style.height)<500)) {
        e.style.width = (parseInt(e.style.width)+10)+'px';
        e.style.height = (parseInt(e.style.height)+10)+'px';
        clearTimeout();
        setTimeout(expand(e), 20);
    }
}

window.onload = init;
</script>

, og:

<table>
<tr><td id="overlay_body" onclick="expand(this)">This is a test!</td>
</tr>
</table>

Problemet er at den bare kalder funktionen med det samme. Det gælder også hvis jeg for eksempel prøver at kalde en alert() med setTimeout(). Jeg har kun prøvet at køre siden fra computeren, da jeg endnu ikke har etwebhotel at uploade den til... Kan det være grunden? Ellers hjælp venligst...

På forhånd tak, Mesteren
Avatar billede tjens Nybegynder
12. juli 2009 - 22:38 #1
øørste parameter til setTimeout skal være en string.

Men så opstår det problem, at variabel e ikke kan føres videre.
Men det kan løses ved at gemme den i en global variabel:

var timerElm;

function expand(e) {
    timerElm=e;
    if ((parseInt(e.style.width)<500) && (parseInt(e.style.height)<500)) {
        e.style.width = (parseInt(e.style.width)+10)+'px';
        e.style.height = (parseInt(e.style.height)+10)+'px';
        clearTimeout();
        setTimeout('expand(timerElm)', 2);
    }
}

Ovenstående er testet og virker i MSIE 8, FF3, Chrome
Men det virker ikke i Opera?
Avatar billede mesteren_selv Nybegynder
12. juli 2009 - 23:16 #2
Det virker!

Tak for hjælpen... Point?
Avatar billede tjens Nybegynder
14. juli 2009 - 13:10 #3
Svar
Avatar billede o-zone Nybegynder
14. juli 2009 - 13:25 #4
hmm - jeg var vist for længe om at lave min løsning. Anyway så er der her en løsning uden den globale variabel (ikke at jeg vil holde på at hverken den ene eller den anden løsning er at foretrække).

---8<----------
<html>
<head>
<script language="javascript" type="text/javascript">
function init(){
    document.getElementById('overlay_body').style.height = '200px';
    document.getElementById('overlay_body').style.width = '200px';
}

function expand(e) {
    if ((parseInt(e.style.width)<500) && (parseInt(e.style.height)<500)) {
        e.style.width = (parseInt(e.style.width)+10)+'px';
        e.style.height = (parseInt(e.style.height)+10)+'px';
        setTimeout('expand(document.getElementById("'+e.id+'"))', 20);
    }
}
</script>

</head>
<body onload="init(); return true;">
<table border="1">
<tr><td id="overlay_body" onclick="expand(this); return true;">This is a test!</td>
</tr>
</table>
</body>
</html>
---8<----------
Avatar billede o-zone Nybegynder
14. juli 2009 - 13:28 #5
WTF??? Jeg ser lige at svaret fra tjens er endog meget gammelt :-O

Da jeg for et øjeblik så spørgsmålet stod det som ubesvaret, og jeg kunne ikke se andet end selve spørgsmålet :-O

Er der noget jeg ikke forstår ved expertens nye layout, eller har jeg bare set forgert? :-/
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester