Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: light sequence

  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    15
    Thanked 0 Times in 0 Posts

    light sequence

    Hi,

    I need some advice.

    I wanted to create a 4 by 4 grid in a webpage. Then i want to select a specific box in the grid to flash a certain colour.

    There will always be a set sequence of the same sections lighting up with the same colours.
    So row 2 col 2 flashes green, then row 4 col 1 flashes pink etc. With around 5 boxes being used out of 16.


    How would i go about doing this?

    Is using Javascript the best thing to use?

    Any advice would be greatly appreciated.

    Thanks.

  • #2
    New Coder
    Join Date
    Aug 2005
    Posts
    71
    Thanks
    9
    Thanked 3 Times in 3 Posts
    It sounds like a table would be the best bet and then use javascript to change the cells backgrounds. I did a quick search and came across this.

    http://www.webmasterworld.com/forum91/485.htm

    it's not exactly what you are doing, but it should get you on the right track.
    It's OK to pee against the wind if your standing in a lake.

  • Users who have thanked Budreaux for this post:

    forms (07-14-2011)

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks so much.

    The link you gave was a lot of help to get me started.

    Thanks.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <table border="1" >
      <tr height="100" >
        <td id="f1" width="100" >&nbsp;</td>
        <td width="100" >&nbsp;</td>
        <td id="f2"  width="100" >&nbsp;</td>
        <td width="100" >&nbsp;</td>
      </tr>
      <tr height="100" >
        <td width="100" >&nbsp;</td>
        <td id="f3" width="100" >&nbsp;</td>
        <td width="100" >&nbsp;</td>
        <td width="100" >&nbsp;</td>
      </tr>
      <tr height="100" >
        <td width="100" >&nbsp;</td>
        <td id="f4" width="100" >&nbsp;</td>
        <td width="100" >&nbsp;</td>
        <td id="f5" width="100" >&nbsp;</td>
      </tr>
    </table>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Flash(o){
     this.obj=document.getElementById(o.ID);
     this.color=o.Color;
     this.ud=true;
     this.onms=o.OnDuration||500;
     this.offms=o.OffDuration||this.onms;
     this.flash();
    }
    
    Flash.prototype.flash=function(){
     var oop=this;
     this.obj.style.backgroundColor=this.ud?this.color:'transparent';
     this.ud=!this.ud;
     setTimeout(function(){ oop.flash(); },this.ud?this.offms:this.onms);
    }
    
    new Flash({
     ID:'f1',
     Color:'red',
     OnDuration:1000, //optional, default=500
     OffDuration:500  //optional, default=OnDuration
    });
    
    new Flash({
     ID:'f2',
     Color:'green'
    });
    
    new Flash({
     ID:'f3',
     Color:'blue'
    });
    
    new Flash({
     ID:'f4',
     Color:'yellow'
    });
    
    new Flash({
     ID:'f4',
     Color:'#FFCC66'
    });
    
    new Flash({
     ID:'f5',
     OnDuration:100,
     Color:'#FF33FF'
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •