I have a loop that creates a new div for each unique event
while($event!=$nextEvent){
echo'<div id='sportType'>';
//some code
echo'</div>'
}
I would like to automatically change the background-colour to a different background-colour for each created div, each div must be a separate/unique colour, there will never be more than 7 divs
Something like this
Any idea how I can do this?
I have a loop that creates a new div for each unique event
while($event!=$nextEvent){
echo'<div id='sportType'>';
//some code
echo'</div>'
}
I would like to automatically change the background-colour to a different background-colour for each created div, each div must be a separate/unique colour, there will never be more than 7 divs
Something like this
Any idea how I can do this?
Share Improve this question asked May 16, 2015 at 12:33 user4868041user4868041 1- 2 FYI, IDs must be unique on document context, you are generating invalid HTML markup – A. Wolff Commented May 16, 2015 at 13:18
3 Answers
Reset to default 5Since there is at most 7 divs, you can do this with pure css and the nth-child selector
div:nth-child(1) {
background: gray;
}
div:nth-child(2) {
background: red;
}
div:nth-child(3) {
background: cyan;
}
div:nth-child(4) {
background: blue;
}
div:nth-child(5) {
background: black;
}
div:nth-child(6) {
background: green;
}
div:nth-child(7) {
background: yellow;
}
If you desire more than seven divs, it will be more practical with javascript like
var divs = document.getElementsByTagName('div');
for(var i =0; i < divs.length; i++){
divs[i].style.background = getRandomColor();
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
Random color generator in JavaScript
You can do it in PHP itself as follows
Declare an array which contains the colour codes and use the array when you create the <div>
s dynamically.See the below code as an example
<?php $color= array("#341014", "#BE6353", "#2F2E3B","#20222B","#BB644C","#F8834E","#E4B9AC");
$i=0;
while($event!=$nextEvent){
echo"<div id='sportType' style='background-color:".$color[i].";'>";
//some code
echo'</div>';
$i++;
}
?>
You can just specify any number of colours in the array and it will apply the colours accordingly even if a large number of <div>
is created,ie for eg if you want 100 divs to be created, you can just add 100 or more than 100 colour codes in your array and these colours will be used in the while loop.
you can use the function rand
to generate new colors
while($event!=$nextEvent){
$r=rand(0, 255);
$g=rand(0, 255);
$b=rand(0, 255);
echo"<div id=\"sportType\" style=\"backgroung:rgb($r,$g,$b);\">";
//some code
echo "</div>"
}
rand
function will creat a random number to the RGB color collection.