Changing background colors items using an array in a circle

Question

I have a particular challenge, and is killing me, because I don't know how to do what I am trying to.

I have 5 items: 4 divs with width and height 50px and the body.

And I want create a function that sets the background-color for these items, for example:

var colors = ['red', 'blue', 'green', 'black', 'pink'];

div1 = red
div2 = blue
div3 = green
div4 = black
body = pink

and if the browser reload, they change:

div1 = pink
div2 = red
div3 = blue
div4 = green
body = black

and if the browser change the same happens...

There is any jquery plugin that do that? I don't know where start.. i already create the array with the items, inside a function:

HTML:

<body>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</body>

JS:

function changeColors() {
    var colors = ['red', 'blue', 'green', 'black', 'pink'];


}

changeColors();

What do you mean by _if the browser changes_? You mean you want different colors if they go from Chrome to Firefox? — Barmar, Apr 01 '15 at 22:06
What do you mean by "the browser change"? Also you want to look at [Modulo operator](http://stackoverflow.com/questions/8900652/what-does-do-in-javascript). Each time your change happens increase a count by one modulo the array length then use that value to loop through the array — amura.cxg, Apr 01 '15 at 22:06
I guess OP means -> changing of colors after page refresh/reload? — sinisake, Apr 01 '15 at 22:07
If you want to change things after reload, you need to save the old position in the array in a cookie or localStorage. — Barmar, Apr 01 '15 at 22:07
yes.. sorry guys, if the browser refresh/reload.. thanks @nevermind — , Apr 01 '15 at 22:11

amura.cxg · Answer 1 · 2015-04-01T22:22:48.943

If you want to have the values change each time the page is loaded you would need to use localStorage or cookies. Here's an example using localStorage:

var colors = ['red', 'blue', 'green', 'black', 'pink'];

if(localStorage.count)
{
    localStorage.count = (localStorage.count + 1) % colors.length;
}
else
{
    localStorage.count = 0;
}

for(var i = 0; i < colors.length; i++)
{
    var color = colors[(localStorage.count + i) % colors.length];
    //Set the i'th element's back-color to color
}

Here's a Fiddle that shows an example of how the modulo method works

score 2 · Accepted Answer · answered Apr 01 '15 at 22:11

You can random shuffle array using this function:

<script type="text/javascript">
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
</script>

and this is how to apply it:

<script type="text/javascript">
var colors = ['red', 'blue', 'green', 'black', 'pink'];
shuffle(colors);
// and your code to assign colors to divs and body
</script>

score 0 · Answer 3 · edited Apr 20 '21 at 05:50

0

I think that your main problem it determinate what browser is been used, so then you can read this: How to detect Safari, Chrome, IE, Firefox and Opera browser? and then you can start to making the code to change the color depending the browser. I hope this be the answer.

edited Apr 20 '21 at 05:50

Glorfindel

19,729
13
67
91

answered Apr 01 '15 at 22:09

xsami

1,259
15
30

score 0 · Answer 4 · answered Apr 01 '15 at 22:50

It should be pretty simple task

var colors = ['red', 'blue', 'green', 'black', 'pink'];
var count = 0;

function colorMe() {
  $("body").find("div").each(function() {
    var index = $("body").find("div").index(this);
    var i = (index + count) % colors.length;
    $(this).css("background-color", colors[i]);
  });
  count++;
}

$(window).resize(colorMe);
$(document).ready(colorMe);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>first</div>
<div>second</div>
<div>third</div>
<div>fourth</div>

It handles resize with color change as well - see full page – MaxZoom Apr 01 '15 at 22:51 — MaxZoom, Apr 01 '15 at 22:51

Changing background colors items using an array in a circle

4 Answers4