Question

I wanted to write a javascript code that will slide a div in specific direction, distance and in some given time. I wrote this small script. but doesn’t work at all. Instead browser gets slow. No change in position is visible.
Can someone tell me how to achieve the result ? I know there are many ready made libraries that can do this easily. But I just wanted to give it a try.

<script type="text/javascript" language="javascript">
    var element = '';
    var slidePerMS = '';
    function slideIt(ele, direction, distance, slideDuration){
        element = ele;
        var i=0;
        slidePerMS = distance / (slideDuration*1000);
        for(i=0; i<3000; i++){
            setTimeout("changePosition()",1);
    }
}
function changePosition(){              
    var currElement = document.getElementById(element);
    currElement.style.left = "'"+slidePerMS+"px'";
}
</script>

Answer 1

SOO many things wrong with that code it’s not even funny… Let’s see…

1. You are trying to render a 1,000 FPS animation. This is simply impossible for a browser.
2. You are passing a string as parameter to setTimeout, which is as evil as eval.
3. You set slidePerMS once but never change it after, resulting in the div being moved to the exact same spot over and over.
4. You are setting the style with extra quotes inside – do you put quotes in a CSS file?

That’s to name but a few. Try this instead:

<script type="text/javascript" language="javascript"> 
function slideIt(elem, direction, distance, slideDuration){ 
    var elmt = document.getElementById(elem),
        i=0, step = distance / (slideDuration*20),
        stepper = setInterval(function() {
            i = Math.min(distance,i+step);
            elmt.style.left = i+'px';
            if( i == distance) clearInterval(stepper);
        },50);
}
</script>