Question

Hi i have this code right now on my website…

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
        var scrollSpeed = 50;       // Speed in milliseconds
        var step = 1;               // How many pixels to move per step
        var current = 0;            // The current pixel row
        var imageWidth = 4000;      // Background image width
        var headerWidth = screen.width;     // How wide the header is.

        //The pixel row where to start a new loop
        var restartPosition = -(imageWidth - headerWidth);

        function scrollBg(){
            //Go to next pixel row.
            current -= step;

            //If at the end of the image, then go to the top.
            if (current == restartPosition){
                current = 0;
            }

            //Set the CSS of the header.
            $('#body').css("background-position",current+"px 0");
        }

        //Calls the scrolling function repeatedly
        var init = setInterval("scrollBg()", scrollSpeed);
</script>   

I’m trying to add a second jQuery selector to:

$('#body').css("background-position",current+"px 0");

so that the css background-position property is changed for two elements.

IE 8 will not work with gradient and background so I’m using a nested div (class=”flash-bg”) with the background picture and want to update it’s background-position so that it will animate in IE as well.

How can I add “flash-bg” to the jquery code? Is there a way to just add it next to ‘#body’? Or just repeat the code except with ‘#flash-bg’? Thanks!

Answer 1

If you want to set the background-position on both #body and .flash-bg, this will work:

$('#body, .flash-bg').css("background-position",current+"px 0");

Also, in your setInterval, you can pass a reference to the function instead of a string to be eval:ed:

var init = setInterval(scrollBg, scrollSpeed);