jquery div image scroller

[yuriman]

Im making a website right now that has clouds on the top thats repeating in the x axis. I want the clouds to scroll in in a constant speed and get repeated over and over again with no spacing. How would i do this?

I found a good image scrolling script a while ago, but i cant find it now :/

[jaybuz]

setInterval('scrollBG()', 50);

function scrollBG()
{
	var bg = document.getElementById('clouds').style.backgroundPosition,
		count = 0;
	
	(count < [ CloudWidth ]) ? count++ : count = 0;
	bg = count + 'px 0';
}

You need to make the cloud image really long and then make it repeat so when it resets to 0 it doesn't look like it changes.

Replace [ CloudWidth ] with the width of the image.

[cas97]

Or, you know, just use a GIF.

[Jelly_]

[QUOTE=cas97;29937621]Or, you know, just use a GIF.[/QUOTE]

Welcome to 1997.

[cas97]

[QUOTE=Jelly;29938943]Welcome to 1997.[/QUOTE]

[i]Really?[/i]

[Jelly_]

[QUOTE=cas97;29939631][i]Really?[/i][/QUOTE]

Gif has horrible compression and quality. For example [img]http://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif[/img] is 1.36MB.

[Tangara]

[QUOTE=jaybuz;29937311]

setInterval('scrollBG()', 50);

function scrollBG()
{
	var bg = document.getElementById('clouds').style.backgroundPosition,
		count = 0;
	
	(count < [ CloudWidth ]) ? count++ : count = 0;
	bg = count + 'px 0';
}

You need to make the cloud image really long and then make it repeat so when it resets to 0 it doesn't look like it changes.

Replace [ CloudWidth ] with the width of the image.[/QUOTE]

(function() {
	var bg = document.getElementById('clouds').style.backgroundPosition,
		count = 0;
	
	(count < [ CloudWidth ]) ? count++ : count = 0;
	bg = count + 'px 0';
	setTimeout(arguments.callee, 50);
})();

setInterval is evil, and so is passing a string to setTimeout

[jaybuz]

Oh cool. Does arguments.callee refer to itself?

[yuriman]

[QUOTE=Tangara;29942934]

(function() {
    var bg = document.getElementById('clouds').style.backgroundPosition,
        count = 0;
    
    (count < [ CloudWidth ]) ? count++ : count = 0;
    bg = count + 'px 0';
    setTimeout(arguments.callee, 50);
})();

setInterval is evil, and so is passing a string to setTimeout[/QUOTE]
For some reason it doesnt work.

HTML:
[html]
<div id="clouds">
</div>
[/html]CSS:
[css]
#clouds{
height: 190px;
background: url(../../images/bg-clouds.png);
}
[/css]
I replaced [ CloudWidth ] with 2247

[jaybuz]

Check for errors in Firebug. A link would be nice if you actually have hosting.

[yuriman]

The url to it is [url]http://sp.blackvoid.eu[/url]

[jaybuz]

var count = 0;

(function()
{		
	(count < 2247) ? count++ : count = 0;
	document.getElementById('clouds').style.backgroundPosition = count + 'px 0';
	setTimeout(arguments.callee, 50);
})();

Can't set the count inside of the function because it was just resetting it.

Change count++ to count += 2 to make it go faster.

[yuriman]

[QUOTE=jaybuz;29947677]

var count = 0;

(function()
{        
    (count < 2247) ? count++ : count = 0;
    document.getElementById('clouds').style.backgroundPosition = count + 'px 0';
    setTimeout(arguments.callee, 50);
})();

Can't set the count inside of the function because it was just resetting it.

Change count++ to count += 2 to make it go faster.[/QUOTE]
Thanks, feel dumb for missing that.

[jaybuz]

[QUOTE=yuriman;29947759]Thanks, feel dumb for missing that.[/QUOTE]

It was my fault. :)