CODEWITHSUNDEEP
jqueryhtml
user2552392
user2552392

Reputation: 19

jQuery image sliding up instead of sliding right

Basically my code is making this image slide up when I want it to slide to the right. What's wrong with it?

HTML

<div id="wrapper">
    <div id="header">
    </div>
</div>

JS

var scrollSpeed = 70;        // Speed in milliseconds
var step = 1;               // How many pixels to move per step
var current = 0;            // The current pixel row
var imageHeight = 4300;     // Background image height
var headerHeight = 300;     // How tall the header is.

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

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.
$('#header').css("background-position","0 "+current+"px");


}

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

Here is the code: http://pastebin.com/9FpvSBxm

Upvotes: 0

Views: 249

Answers (2)

user2552392
user2552392

Reputation: 19

Update: I figured it out. 

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

I changed the 0 to a 1 and it fixed it. Now this was purely by luck, but why did that fix it?

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

You need to increment the value

function scrollBg(){

    //Go to next pixel row.
    current += step; //increment instead of decrement

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

    //Set the CSS of the header.
    $('#header').css("background-position",current +"px 0"); // parameters are right top not top right



}

Demo: Fiddle

Upvotes: 1

Related Questions