I am trying to write a small test page that distributes images through a window (see Image). I have colored boxes inside the table (gray frame), each of which is an element.
<table id="boxes" style="border: 1px solid #666;">
<tr>
<td><div class="box red"></div></td>
<td><div class="box green"></div></td>
<td><div class="box blue"></div></td>
<td><div class="box yellow"></div></td>
<td><div class="box pink"></div></td>
<td><div class="box lightblue"></div></td>
</tr>
</table>
The effect I'm aiming for is an infinite loop from right to left, such that when the right edge of the window leaves the left edge of the window (black bold line), it is then added to the end of the table to continue moving. Adding is easy with jQuery:
$('#boxes td:first').remove().appendTo('#boxes tr')
I am trying to figure out 2 things: 1. how to have continuous movement from right to left on the table (jQuery.animate?) 2. how to constantly monitor the right edge of the leading field, possibly with
var tableEdge = $('#boxes').position().left;
var boxEdge = $('#boxes td:first').position().left + $('#boxes td:first').width();
if ( boxEdge < tableEdge ) {
$('#boxes td:first').remove().appendTo('#boxes tr');
}
Thank you
sa125