javascript to change cell background colours on a timer.

Discussion in 'Javascript' started by Peter Williams, Jun 1, 2005.

  1. 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).
     
    Peter Williams, Jun 1, 2005
    #1
    1. Advertising

  2. Peter Williams

    Random Guest

    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.getElementById )
    gid = function ( x ) {
    return document.getElementById( 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.backgroundColor

    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.backgroundColor won't be set right off. Only the
    currentStyle.backgroundColor 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.backgroundColor =
    cells[ c ].currentStyle.backgroundColor;

    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 ].backgroundColor;

    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 ].backgroundColor = cells[ c + 1 ].backgroundColor;

    Then handle the special case:
    cells[ cells.length - 1 ].backgroundColor = colorofA;


    Our moveColors function now looks like this:

    function moveColors() {
    var colorofA = cells[ 0 ].backgroundColor;

    for( var c = 0; c < cells.length - 1; c++ )
    cells[ c ].backgroundColor = cells[ c + 1 ].backgroundColor;

    cells[ cells.length - 1 ].backgroundColor = 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 ].backgroundColor;

    for( var c = 0; c < cells.length - 1; c++ )
    cells[ c ].backgroundColor = cells[ c + 1 ].backgroundColor;

    cells[ cells.length - 1 ].backgroundColor = 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.getElementById )
    gid = function ( x ) {
    return document.getElementById( x );
    }

    else
    gid = function ( x ) {
    return document.all[ x ];
    }

    function moveColors() {
    var colorofA = cells[ 0 ].backgroundColor;

    for( var c = 0; c < cells.length - 1; c++ )
    cells[ c ].backgroundColor = cells[ c + 1 ].backgroundColor;

    cells[ cells.length - 1 ].backgroundColor = 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.backgroundColor =
    cells[ c ].currentStyle.backgroundColor;

    cells[ c ] = cells[ c ].style;
    }

    T = setTimeout( moveColors, 500 );
    }


    </script>
    </head>
    <body onLoad=docLoaded()>
    <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>
     
    Random, Jun 1, 2005
    #2
    1. Advertising

  3. Peter Williams

    cosmic fool Guest

    "Peter Williams" <> wrote in message
    news:c1hne.9266$...
    > 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).



    here's a lazy way to do it,

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>

    <script language="JavaScript" type="text/javascript">
    function init() {
    document.getElementById("r1c1").style.backgroundColor = "red";
    document.getElementById("r1c2").style.backgroundColor = "blue";
    document.getElementById("r2c1").style.backgroundColor = "green";
    document.getElementById("r2c2").style.backgroundColor = "yellow";
    document.getElementById("r3c1").style.backgroundColor = "orchid";
    document.getElementById("r3c2").style.backgroundColor = "orange";
    var timerid = setTimeout('switchcolors()',1000);
    }
    function switchcolors() {
    var savecolor = document.getElementById("r1c1").style.backgroundColor;
    document.getElementById("r1c1").style.backgroundColor =
    document.getElementById("r2c1").style.backgroundColor;
    document.getElementById("r2c1").style.backgroundColor =
    document.getElementById("r3c1").style.backgroundColor;
    document.getElementById("r3c1").style.backgroundColor =
    document.getElementById("r3c2").style.backgroundColor;
    document.getElementById("r3c2").style.backgroundColor =
    document.getElementById("r2c2").style.backgroundColor;
    document.getElementById("r2c2").style.backgroundColor =
    document.getElementById("r1c2").style.backgroundColor;
    document.getElementById("r1c2").style.backgroundColor = savecolor;
    var timerid = setTimeout('switchcolors()',1000);
    }
    </script>
    </head>

    <body onload=init()>
    <table>
    <tr><td id=r1c1>A</td><td id=r1c2>B</td></tr>
    <tr><td id=r2c1>C</td><td id=r2c2>D</td></tr>
    <tr><td id=r3c1>E</td><td id=r3c2>F</td></tr>
    </table>
    </body>
    </html>
     
    cosmic fool, Jun 1, 2005
    #3
  4. Peter Williams

    RobB Guest

    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).


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">

    #marquee {
    width: 120px;
    margin: 100px auto;
    border-collapse: collapse;
    }
    #marquee td {
    width: 20px;
    height: 20px;
    border: 3px #fff inset;
    background: #000;
    }

    </style>
    <script type="text/javascript">

    var colors = [];
    var cells = [];

    function init(table_id)
    {
    var table, trs, tr, r = 0, tds, td, c;
    if (document.getElementById
    && (table = document.getElementById(table_id))
    && (trs = table.rows))
    {
    tr = trs[r];
    tds = tr.cells;
    for (c = 0, cs = tds.length; c < cs; ++c)
    {
    cells.push(td = tds[c]); //top row
    colors.push(td.style.background); //BGs
    }
    for (r = 1, rs = trs.length - 1; r < rs; ++r)
    {
    tr = trs[r];
    tds = tr.cells;
    cells.push(td = tds[tds.length - 1]); //right side
    colors.push(td.style.background);
    }
    tr = trs[rs];
    tds = tr.cells;
    for (c = tds.length - 1; c > 0; --c)
    {
    cells.push(td = tds[c]); //bottom row
    colors.push(td.style.background);
    }
    for (r; r > 0; --r)
    {
    tr = trs[r];
    tds = tr.cells;
    cells.push(td = tds[0]); //left side
    colors.push(td.style.background);
    }
    }
    T_marquee();
    }

    Array.prototype.rotate = function() //extension
    {
    this.unshift(this.pop());
    return this;
    }

    function T_marquee()
    {
    for (var i = 0, l = cells.length; i < l; ++i)
    cells.style.background = colors;
    colors.rotate();
    }

    window.onload = function()
    {
    init('marquee');
    window.intID = null;
    intID = window.setInterval('T_marquee()', 1000);
    }

    window.onunload = function() //intervals==scary
    {
    if (intID)
    clearInterval(intID);
    }

    </script>
    </head>
    <body>
    <table id="marquee" cellspacing="1">
    <tbody>
    <tr>
    <td style="background:#cc8;"></td>
    <td style="background:#8cc;"></td>
    <td style="background:#8c8;"></td>
    <td style="background:#da5;"></td>
    <td style="background:#889;"></td>
    <td style="background:#a94;"></td>
    </tr><tr>
    <td style="background:#8e6;"></td>
    <td></td><td></td><td></td><td></td>
    <td style="background:#88e;"></td>
    </tr><tr>
    <td style="background:#e6c;"></td>
    <td></td><td></td><td></td><td></td>
    <td style="background:#f93;"></td>
    </tr><tr>
    <td style="background:#cc0;"></td>
    <td></td><td></td><td></td><td></td>
    <td style="background:#ebf;"></td>
    </tr><tr>
    <td style="background:#ee7;"></td>
    <td></td><td></td><td></td><td></td>
    <td style="background:#9b4;"></td>
    </tr><tr>
    <td style="background:#b0b;"></td>
    <td style="background:#8b5;"></td>
    <td style="background:#9fc;"></td>
    <td style="background:#cd6;"></td>
    <td style="background:#e99;"></td>
    <td style="background:#48a;"></td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

    Should work with any (reasonably symmetrical) table. No ids necessary.
    Nothing wrong with inline CSS, used judiciously. Hope this isn't
    homework. Cheers.
     
    RobB, Jun 1, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Amirallia

    How Do I Print Table Cell Colours?

    Amirallia, Jan 27, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    519
    teknohippy
    Jan 27, 2005
  2. Massimo Capetola

    How Do I Print Table Cell Colours?

    Massimo Capetola, Sep 28, 2004, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    110
    Robert Koritnik
    Sep 29, 2004
  3. Amirallia

    How Do I Print Table Cell Colours?

    Amirallia, Jan 27, 2005, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    107
    Amirallia
    Jan 27, 2005
  4. Mark
    Replies:
    2
    Views:
    182
  5. Trev

    Alternating colours in a table cell

    Trev, Nov 7, 2006, in forum: Javascript
    Replies:
    13
    Views:
    185
    Randy Webb
    Nov 7, 2006
Loading...

Share This Page