[RESOLVED] scrolling background

[merhaba]

hi,
I am tring to create a simple "scrolling background" but the result was a failure.
can you help me please,,
I have two images each is 999 pix of width ,the idea is when the first image is= to the left edge of the screen
I want the second image to follow the first one and so on...

<script>
var sstop=setInterval("run()",50)
function run()
{
var pic1 = document.getElementById("imagea");
 var pic2 = document.getElementById("imageb");
pic1.style.posLeft-=3;
if(pic1.style.posLeft<0)
{
pic2.style.posLeft=999;
pic2.style.posLeft-=3;
}
else
if(pic2.style.posLeft<0)
{
pic1.style.posLeft=999;
pic1.style.posLeft-=3;

}
}
</script>
<img src="aaa.gif" id=imagea style="position:absolute;left:1;width:999";>
<img src="bbb.gif" id=imageb style="position:absolute;left:999;width:999";> 

[Merri]

Lets change the logic a bit:

<script type="text/javascript">
var sstop=setInterval("run()",50)
function run()
{
var pic1 = document.getElementById("imagea");
var pic2 = document.getElementById("imageb");

pic1.style.posLeft -= 3;
pic2.style.posLeft -= 3;

if (pic1.style.posLeft < pic2.style.posLeft) {
    if (pic1.style.posLeft <= -999) { pic1.style.posLeft += 999; }
} else {
    if (pic2.style.posLeft <= -999) { pic2.style.posLeft += 999; }
}

}
</script>
<img src="aaa.gif" id="imagea" style="position:absolute;left:0;width:999;" />
<img src="bbb.gif" id="imageb" style="position:absolute;left:999;width:999;" />

Didn't test this, but ought to work


Be careful with the syntax and try to follow the standards. Doing "strict" code helps finding errors easier as you can run your page through a validator to see if you've made typos etc.


Edit: Inserted the missing } character

[merhaba]

Thanks Merii for your quick reply
I have just tested it ..but it did not work?
is somthing missing?

[Merri]

There is atleast one } missing. I forgot to close the function, I'm used to indented code

[merhaba]

Yes ,I fixed it but there is still space between the two pictures...
could you fix that ,too?
thanks

[Merri]

If it is just one pixel wide, then just shrink the starting left position of the second picture. If the gap keeps getting bigger after each rollout, then += 999 is too much.


Oh, and noticed:

if (pic1.style.posLeft <= 999)

should've been:

if (pic1.style.posLeft <= -999)


Should test but I'm busy doing my own projects, too

[Merri]

After testing, seems like the issue was in so many fronts that it was no wonder it didn't work. I wasn't sure if the code was non-IE compatible so I switched to what I knew to be in W3C's DOM. This new code runs fine on both Firefox and IE6:

				<div style="color:white;height:50px;overflow:hidden;position:relative;text-align:right;">
					<div id="red" style="background:red;height:50px;left:0;position:absolute;width:100px;">Red</div>
					<div id="blue" style="background:blue;height:50px;left:100px;position:absolute;width:200px;">Blue</div>
				</div>
				<script type="text/javascript">
setTimeout('run()', 50);
function run() {
	var pic1 = document.getElementById('red');
	var pic2 = document.getElementById('blue');

	var pic1width = pic1.style.width.substring(0, pic1.style.width.indexOf('px')) * 1;
	var pic2width = pic2.style.width.substring(0, pic2.style.width.indexOf('px')) * 1;

	var pic1left = pic1.style.left.substring(0, pic1.style.left.indexOf('px')) - 9;
	var pic2left = pic2.style.left.substring(0, pic2.style.left.indexOf('px')) - 9;

	if (pic1left < pic2left) {
		if (pic1left <= -pic1width) {
			pic1left += pic1width + pic2width;
		} else {
			pic2left = pic1left + pic1width;
		}
	} else {
		if (pic2left <= -pic2width) {
			pic2left += pic1width + pic2width;
		} else {
			pic1left = pic2left + pic2width;
		}
	}

	pic1.style.left = pic1left + 'px';
	pic2.style.left = pic2left + 'px';

	pic1.innerHTML = pic1left;
	pic2.innerHTML = pic2left;

	setTimeout('run()', 50);
}
				</script>