CODEWITHSUNDEEP
javascriptjqueryhtml
user4002542
user4002542

Reputation:

Changing background colors items using an array in a circle

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();

Upvotes: 0

Views: 3018

Answers (4)

xsami
xsami

Reputation: 1330

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.

Upvotes: 0

MaxZoom
MaxZoom

Reputation: 7743

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>

Upvotes: 0

amura.cxg
amura.cxg

Reputation: 2427

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

Upvotes: 2

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11045

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>

Upvotes: 2

Related Questions