Peter Williams wrote:
Hi All,
I want to write some javascript for a html page which does the
following.
Imagine that the page contains a table with 2 columns and 3 rows, e.g.:
+---+---+
| A | B |
+---+---+
| C | D |
+---+---+
| E | F |
+---+---+
and that the background colour for each cell is a different colour.
I want some javascript which will wait a given time, say 10 seconds,
then change the background colour of the cells. So that:
cell A gets cell C's colour
cell C gets cell E's colour
cell E gets cell F's colour
cell F gets cell D's colour
cell D gets cell B's colour
cell B gets cell A's (original) colour
or in other words, the background colours of cells rotate around
clockwise.
Can someone please post up some sample js code that will do this???
Also, I am hoping that this would not interfere with the user viewing
the page as per normal.
NB -- I'm a bit of a newbie at writing javascript. :-)
Regards,
Peter W. :-)))
Sandy Bay, Hobart, Tas, AU.
(delete silly boy to reply via email).
Just don't make it necessary for this to happen -- personally, this
kind of thing is very irritating for me to look at, and I tend to jump
right off any page that has flashies like this.
Not knowing how much of a newbie you are, I'm going to put this in
tutorial form because I like to think people would rather learn how to
do something than have it done for them. The sum total is at the bottom
if you want to skip straight to it. Don't.
First things first, ID each of the cells:
cellA, cellB, et cetera.
<td id=cellA>A</td>
To identify it within JavaScript, then, we might make a function to
provide some cross-compatibility:
var gid;
if( document.getEle mentById )
gid = function ( x ) {
return document.getEle mentById( x );
}
else
gid = function ( x ) {
return document.all[ x ];
}
-- this leaves out some older browsers, but people still using them are
probably used to being left out, by now.
Now, anytime you make a call like:
gid( 'cellA' );
You get back a reference to your cellA element.
To reference its background color, use: gid( 'cellA'
).style.backgro undColor
Now since this operation of moving colours about is going to be run
repeatedly, we'll make a function to do it.
function moveColors( ) {
// See below
}
Also since this is going to be run repeatedly, we probably don't want
to be making calls to our gid function too often or it'll slow things
down. We need a faster way to address our cells.
So we'll declare an array AFTER the document's loaded and load the
elements we want into it, like so (putting them in order according to
how we want the colors to move):
cells = [
gid( 'cellA' ), gid( 'cellC' ),
gid( 'cellE' ), gid( 'cellF' ),
gid( 'cellD' ), gid( 'cellB' )
];
If we tried to do this before the </table>, these cells wouldn't exist
and we'd have a bunch of errors instead, so we'll put this in a
function to be called once the document is loaded.
function docLoaded( ) {
cells = [
gid( 'cellA' ), gid( 'cellC' ),
gid( 'cellE' ), gid( 'cellF' ),
gid( 'cellD' ), gid( 'cellB' )
];
}
We'll run into a problem later: since I'm not going to use inline CSS
to set the colours (and you shouldn't either), the value of the
style.backgroun dColor won't be set right off. Only the
currentStyle.ba ckgroundColor will be.
So we add a few more lines to docLoaded( ):
function docLoaded( ) {
cells = [
gid( 'cellA' ), gid( 'cellC' ),
gid( 'cellE' ), gid( 'cellF' ),
gid( 'cellD' ), gid( 'cellB' )
];
for( var c = 0; c < cells.length; c++ ) {
cells[ c ].style.backgrou ndColor =
cells[ c ].currentStyle.b ackgroundColor;
cells[ c ] = cells[ c ].style;
}
}
That last line is mostly so we don't have to keep typing .style all
over the place.
Now we start filling out the function to moveColors.
Thinking logically, if we just start moving the colours around, one of
them is going to get lost.
colour of A = colour of C
colour of C = colour of D
....
colour of B = colour of A? By this point, A was already changed. You
already pointed this out yourself.
So we'll have to store A before changing it.
var colorofA = cells[ 0 ].backgroundColo r;
Then we move colours around. Easiest way is to use a loop, but we want
the loop to stop on the second-to-last cell, because the last is a
special case (there are no cells after it).
for( var c = 0; c < cells.length - 1; c++ )
cells[ c ].backgroundColo r = cells[ c + 1 ].backgroundColo r;
Then handle the special case:
cells[ cells.length - 1 ].backgroundColo r = colorofA;
Our moveColors function now looks like this:
function moveColors() {
var colorofA = cells[ 0 ].backgroundColo r;
for( var c = 0; c < cells.length - 1; c++ )
cells[ c ].backgroundColo r = cells[ c + 1 ].backgroundColo r;
cells[ cells.length - 1 ].backgroundColo r = colorofA;
}
(Note that you can speed it up a little more by not checking
cells.length so often.)
Now to get it moving, I recommend a setInterval. Others might recommend
a setTimeout, and they probably have good reason to do so, so I'm going
to show you how to do that.
setTimeout works like this:
var T = setTimeout( strCode, intInterval );
strCode = code to be executed.
intInterval = milliseconds to wait.
T = the 'process ID' of the timeout.
So, in this case, to make it run moveColors a half-second from now,
you'd do something like this:
T = setTimeout( moveColors, 500 );
Since you want it to run EVERY half-second, you'll put something
similar in the moveColors function, just before the } that ends it.
function moveColors() {
var colorofA = cells[ 0 ].backgroundColo r;
for( var c = 0; c < cells.length - 1; c++ )
cells[ c ].backgroundColo r = cells[ c + 1 ].backgroundColo r;
cells[ cells.length - 1 ].backgroundColo r = colorofA;
T = setTimeout( moveColors, 500 );
}
We'll also put one in the docLoaded function to get it started
automatically.
So here's what we've got in total:
<html>
<head>
<style type=text/css>
#cellA { background-color: red; }
#cellB { background-color: blue; }
#cellC { background-color: green; }
#cellD { background-color: yellow; }
#cellE { background-color: cyan; }
#cellF { background-color: magenta; }
</style>
<script type=text/javascript>
var T; // The PID of the moveColors timeout
var gid; // our own getElementById
var cells; // the list of table cells for easy, speedy reference
if( document.getEle mentById )
gid = function ( x ) {
return document.getEle mentById( x );
}
else
gid = function ( x ) {
return document.all[ x ];
}
function moveColors() {
var colorofA = cells[ 0 ].backgroundColo r;
for( var c = 0; c < cells.length - 1; c++ )
cells[ c ].backgroundColo r = cells[ c + 1 ].backgroundColo r;
cells[ cells.length - 1 ].backgroundColo r = colorofA;
T = setTimeout( moveColors, 500 );
}
function docLoaded( ) {
cells = [
gid( 'cellA' ), gid( 'cellC' ),
gid( 'cellE' ), gid( 'cellF' ),
gid( 'cellD' ), gid( 'cellB' )
];
for( var c = 0; c < cells.length; c++ ) {
cells[ c ].style.backgrou ndColor =
cells[ c ].currentStyle.b ackgroundColor;
cells[ c ] = cells[ c ].style;
}
T = setTimeout( moveColors, 500 );
}
</script>
</head>
<body onLoad=docLoade d()>
<table>
<tr>
<td id=cellA>A</td>
<td id=cellB>B</td>
<tr>
<td id=cellC>C</td>
<td id=cellD>D</td>
</tr>
<tr>
<td id=cellE>E</td>
<td id=cellF>F</td>
</tr>
</table>
</body>
</html>
