Hi everyone,

I am very new to Javascript, and this is my first time using this forum, so apologies in advance if I have posted this query in the wrong place?

I am looking to create click-able buttons which float across the web page, independently of each other and at different (slow) speeds.

In total I have nine buttons, but I have just showed the clocks I am using for their movement, and only for the first three, as the rest follow on from there and all that changes is the currentLeftButton number and the name of the button.

Below are my issues:

1) My main issue, is that the first button to reach the far right side of the page, causes all of the buttons to stop in motion and then they all then in sync continue to move to the left. I would prefer each button to act independently of the rest (when one hits right, it then moves left, when the next hits right, it then moves left, and so on...).

2) At the moment I have nine buttons moving across a web page, but they all move at the same speed. I would like them to move at slightly different speeds.

3) It would also be helpful if their motion could start differently. On loading the web page, all buttons begin to move left. It would be more interesting if some moved left and others moved right.

Hopefully all of this makes sense?

Thanks very much in advance!!

Louise


var counter = 0;
var loopSteps = 0;
var direction = 'right';
function draw()
{
counter++; // counter = counter + 1

var rightLimit = window.innerWidth;
var currentLeftButton1 = cirrusButton.offsetLeft;
if ( currentLeftButton1 >= rightLimit - cirrusButton.offsetWidth )
{
//console.log( 'flip left' );
direction = 'left';

}
if ( currentLeftButton1 <= 0 )
{
direction = 'right';
}


if ( direction == 'right' )
{
currentLeftButton1+=2;
}
else if ( direction == 'left' )
{
currentLeftButton1--;
}


cirrusButton.style.left = currentLeftButton1 + 'px';



var currentLeftButton2 = cirrocumulusButton.offsetLeft;

if ( currentLeftButton2 >= rightLimit - cirrocumulusButton.offsetWidth )
{
//console.log( 'flip left' );
direction = 'left';

}
if ( currentLeftButton2 <= 0 )
{
direction = 'right';
}

//console.log( direction );

if ( direction == 'right' )
{
currentLeftButton2+=2;
}
else if ( direction == 'left' )
{
currentLeftButton2--;
}


cirrocumulusButton.style.left = currentLeftButton2 + 'px';



var currentLeftButton3 = cirrostratusButton.offsetLeft;

if ( currentLeftButton3 >= rightLimit - cirrostratusButton.offsetWidth )
{
//console.log( 'flip left' );
direction = 'left';

}
if ( currentLeftButton3 <= 0 )
{
direction = 'right';
}

//console.log( direction );

if ( direction == 'right' )
{
currentLeftButton3+=2;
}
else if ( direction == 'left' )
{
currentLeftButton3--;
}


cirrostratusButton.style.left = currentLeftButton3 + 'px';



}
setInterval(draw, 70);