Home/ Questions/Q 6145041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T18:44:18+00:00

I am having great difficulty in making the lights on the grid I have

  • 0

I am having great difficulty in making the lights on the grid I have made appear one after the other. At the moment the lights all come on at once but I’m not sure how to make the boxes light up one after the other.

I have pasted the code below:

html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 
<script language="JavaScript" src="script.js">
</script>
</head>
<body>

<div class="container">
    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div id="square1id" class="box spacing"></div>
    <div class="box"></div>

    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div id="square2id" class="box spacing"></div>
    <div class="box"></div>

    <div id="square3id" class="box spacing"></div>
    <div class="box spacing"></div>
    <div id="square4id" class="box spacing"></div>
    <div class="box"></div>

    <div  id="square5id" class="box spacing"></div>
    <div class="box spacing"></div>
    <div id="square6id" class="box spacing"></div>
    <div class="box"></div>
</div>

</body>
</html>

CSS:

 body{
    background-color:#000000;
    margin:0;
    padding:0;
}

h1{
  color:#ffffff;
  text-align:center;
}

.container{
    overflow:hidden;
    width:860px;
    margin-left:250px;
    margin-top:20px;
}
.box{
    width:210px;
    height:120px;
    float:left;
    background-color:#4D4D4D;
    margin-bottom:3px;
}

.spacing{
    margin-right:3px;
}

Script:

  $(document).ready(function(){

    var colourinfo = {
        square1id: [
                    '#000000'
                    ],

        square2id: [
                    '#ffffff'
                    ],
        square3id: [
                    '#FFE600'
                    ],
        square4id: [
                    '#FFE600'
                    ],          
        square5id: [
                    '#FFE600'
                    ],
square6id: [
                    '#FFE600'
                    ]                   

    };

    var count = 0;

    var changecol = function(){
        $.each(colourinfo, function(tileid, colarray){
           $('#'+tileid).css('background-color', colarray[count%colarray.length]);
        }); 
        count++;
    };

    setInterval(changecol, 1000);
});

I would be extremely grateful for any advice on this. Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The underlying issue is that when changecol is called the first time, it loops through yourcolourinfo data structure and applies all the colors in the first execution.

    I made this jsfiddle that does what I think you want to do now, and maybe what you were planning to do next. It cycles each node through a series of colors one at a time every 100ms.

    • 0