2

My problem: Changing the margin-top property via JavaScript objectName.style.marginTop = value; works well in Chrome and Safari, however in Firefox, the positioning seems to be all wrong. Instead of placing the element over the viewport, subsequently lowering it until it is slightly underneath the desired position and then moving it up a bit, Firefox places it way underneath the final position, moves it up and then down, almost mirroring the desired animation.

If I switch of Javascript and enter the value in CSS, the positioning is alright, so I guess the mistake lies in the .js.

Context: I am trying to create a simple animated logo via JavaScript. I want it to drop from outside the browser viewport into its position. The logo is the HTML-element <img id="site_logo" src="logo.png" />

Here goes the JavaScript code:

var logoValue = -400;

function onLoad(){  
    // ...
    logoStarter();
}

function logoStarter(){ //sets the logo in its starting position outside the viewport   
    var site_logo = document.getElementById("site_logo");
    site_logo.style.marginTop = logoValue +"px"; 
    logoAnimationDown();
}

function logoAnimationDown(){       // moves the logo down until it is somewhat underneath its final position 
    if(logoValue <= 20){    
        console.log(logoValue);
        logoValue += 17;

        var site_logo = document.getElementById("site_logo");           
        site_logo.style.marginTop = logoValue +"px";            

        setTimeout('logoAnimationDown()', 30);
        }
    else{
        setTimeout('logoAnimationUp()', 30);
        }
}   

function logoAnimationUp(){   // moves the logo up to its final position
    if(logoValue > 0){  
        console.log(logoValue);
        logoValue -= 10;

        var site_logo = document.getElementById("site_logo");           
        site_logo.style.marginTop = logoValue + "px";

        setTimeout('logoAnimationUp()', 30);
        }
}
max
  • 115
  • 1
  • 9
  • 1
    When you inspect the element *after* the change in FF, what `top-margin`-value do you get? Also, have you tried omitting the `px`? – m90 Apr 16 '12 at 08:30
  • I get `` – max Apr 16 '12 at 08:34
  • When I inspect it in Firebug while the animation plays, the values seem to be alright: They count up from -400 to about +20, then fall down to 5. – max Apr 16 '12 at 08:39
  • 1
    I rebuilt your animation: http://jsfiddle.net/GUqtF/1/ and it works fine in FF and Chrome. You had a scope issue when setting the timeouts inside `logoAnimationDown()` though. See the fiddle for a fix. Is this still buggy in your FF? – m90 Apr 16 '12 at 08:40
  • I did change `setTimeout('logoAnimationDown()', 30);` to `setTimeout(logoAnimationDown, 30);` now but Firefox still produces the same result. Your rebuilt animation is displayed correctly though. – max Apr 16 '12 at 08:48
  • Other things I fixed were defining `var site_logo` in global scope and changing *all* setTimeouts. Other than that I didn't change anything. – m90 Apr 16 '12 at 08:51
  • I take it having the structure of a div with `position: absolute;` surrounding the logo does not have anything to do with it? – max Apr 16 '12 at 08:56
  • Okay I just got it to work (quite an unspectacular solution though): As I wrote #site_logo was an ``. I just added a simple `
    ` around it and assigned the id to the div. It immediately worked... Thanks for your help everyone!
     – max Apr 16 '12 at 09:11

1 Answers1

1

It seems that FF does the procedure twice. Declare your setTimeouts like this:

setTimeout(logoAnimationDown, 30);
setTimeout(logoAnimationUp, 30);

If you use this kind of a quoted string setTimeout('doFunction()',30) to assign the target function, FF does this: eval('doFunction()'), and executes the function immediately (beacause of "()"), and then again after the delay time.

Teemu
  • 22,058
  • 6
  • 53
  • 101
  • Teemu I just tried this but it doesn't change the actual result (see comments above). – max Apr 16 '12 at 08:51
  • Okay I just got it to work (quite an unspectacular solution though): As I wrote #site_logo was an ``. I just added a simple `
    ` around it and assigned the id to the div. It immediately worked... Thanks for your help everyone!
     – max Apr 16 '12 at 09:10