PDA

Click to See Complete Forum and Search --> : background scroller

toma4toma
01-17-2003, 01:43 PM
I need to let scroll a background image in the browser window.

I found this script which works pretty well:

<script language="JavaScript">

var backgroundOffset= 0;
var bgObject=eval('document.body');
function scrollBG(maxSize){
backgroundOffset = backgroundOffset +1;
if( backgroundOffset > maxSize) backgroundOffset = backgroundOffset=0;
bgObject.style.backgroundPosition= "0" - backgroundOffset;
}
var ScrollTimer = window.setInterval("scrollBG(290)",64);

</script>


BUT! because of the if( backgroundOffset > maxSize) backgroundOffset = backgroundOffset=0;
my background image "jumps" back into position at the end of the scroll. I would like it to scroll back backwards, and forward and backwards... like a ping-pong ball.

Any help?
thanx
toma4toma
swon
01-17-2003, 04:25 PM
Hi, forgive me, I've changed the whole script, but now I think it should works for you. I've split it in 2 functions.

<script language="JavaScript">
a=0;i=0;//do not edit

speed = 2;// here you can edit the speed
maxSize=100;// here you can edit the width of your bg

function scrollBG(){
if(i < maxSize)
{i=i+1;a=a-1;}
document.body.style.backgroundPosition= a;
tid=setTimeout("scrollBG()",(100/speed));
if(i==maxSize)
{clearTimeout(tid);i=0;scrollBack();}
}
function scrollBack(){
if(i < maxSize)
{i=i+1;a=a+1;}
document.body.style.backgroundPosition= a;
tid=setTimeout("scrollBack()",(100/speed));
if(i==maxSize)
{clearTimeout(tid);i=0;scrollBG();}
}
</script>
</head>
<body onLoad="scrollBG()" style="background-image:url(images/bg.jpg);background-position:0 0;">

</body>
</html>
toma4toma
01-18-2003, 11:39 AM
I've tested your script and it works. Since my background Img is in a popUp window, I had to adapt it a little bit so that my bg Img doesnt scroll too much and starts over on the right side of the window.

you wrote:
maxSize=100;// here you can edit the width of your bg

Because my popup window's width is 100 and my BG img 180, I wrote:
maxSize=80;// I put the maximum Offset I allow the image to scroll (onLoad, the 100 first pixels are already visible!)


Before I read your answer, I found another solution that works fine too.

<script language="JavaScript">

backgroundOffset = 0;
toggle = false;
ScrollTimer = window.setInterval("scrollBG(80)",50);
function scrollBG(maxSize)
{
if (toggle) --backgroundOffset;
else ++backgroundOffset;
if ((backgroundOffset>maxSize) || (backgroundOffset<0)) toggle=!toggle;
document.body.style.backgroundPosition = 0-backgroundOffset;
}
</script>


thanks and respects to you
toma4toma
ddthecat2
09-16-2007, 11:27 AM
I love it.. Now the question is can it be made to only work as the background of a table?