setInterval different for both IE and FF.

[FutureShock]

Hello

I am very new to advanced JS programming and am looking for some insight.
My experience is in PHP/MySql so I am familiar with programming fundamentals, but by far not an expert.

I created a script that will take a variable number of divs wrapped in a main div and then scroll them vertically non-stop, like a slot-machine.

I develop mainly on FF and had the script working as expected. I then went to IE and noticed that the scrolling action was slower. I set the interval to 50. I experimented with different amounts because I read in a previous article here that FF and IE refresh at a different ms rate. The results where the same.

I also noticed that as the images scroll, if I move the mouse around the screen across links and such the scrolling seems to be a bit jerky and hesitant.

Here is the code I have.

<script type='text/javascript'>
    var div_obj = []; // Will hold all the div objects
    var scroll_id; // For clearing the setInterval
    var total_div_height = 0; // Holds the height of all the divs for repositioning
    var wrapper = document.getElementById('wrapper'); // The main holding div
    var wrapper_height = parseInt(wrapper.style.height); // Holds holding div height
 
    initializeDivs(); // Preposition the divs now.
 
    // We will stack the divs from bottom to top and overflow out the top.
    function initializeDivs() {
        var children = wrapper.childNodes;
        var div_height = []; // Holds individual div heights
        // Preset the first div_top to the bottom of the wrapper.
        // Since we are positioning by (top) this would place it below the wrapper, we will subtract the div_height
        // from it later on for proper positioning
        var div_top = wrapper_height;
        var idx = 0;
        for(x in children) { // Walk thru the children
            var name = children[x].nodeName;
            // Make sure we only process the <div> tags
            if(name == 'DIV') {
                // Load up the div objects into a global array for use in scroll()
                div_obj[idx] = children[x];
 
                // Determine the height of each div to position it properly
                div_height[idx] = parseInt(children[x].style.height);
 
                // Add up each div height in a global var to use in scroll()
                total_div_height = total_div_height + div_height[idx];
 
                // Position each div in relation to the bottom
                // The height of the div will be subtracted to position by top
                // We will then decrement by each new div to stack them
                div_top = (div_top - div_height[idx]);
                children[x].style.top = div_top + 'px';
                idx++;
            }
        }
    }
 
    // The divs will scroll down
    function scroll() {
        for(x in div_obj) {
            var top_pos = parseInt(div_obj[x].style.top);
            if(top_pos <= wrapper_height){
                div_obj[x].style.top = top_pos + 1 + 'px';
            } else {
                div_obj[x].style.top = (wrapper_height - total_div_height) + 'px';
            }
        }            
    }
    function startScroll() {
        scroll_id = setInterval("scroll()", 50);
    }
    function stopScroll() {
        clearInterval(scroll_id);   
    }
</script>
 

The startScroll is called with onload and onmouseout
stopScroll is called with onmouseover.

Now each div that is being scrolled is a table construction with an image sized by the browser. That may account for the hesitant behavior, I am not sure.

Any help here would be appreciated, especially if what I wrote could of been done in a more efficient algorithm.

Oh and the site with the active script is:
http://njeatsnow.com/1index.php

Thanks
Scotty

[gits]

the more nodes are involved and the more DOM operations you do - the more time it will consume. of course the performance will differ in different browsers - i guess the best performance should be achieved with chromium/chrome. the interval time will of course depend on that performance ... there might be different optimal settings for different browsers ... so basically avoid nodes and DOM operation wherever you can ... you could even retrieve the nodes onload already so that you just use references instead of always retrieving them during every step - you could optimize it by creating lookup-maps etc. ...

kind regards