Variable number of menu-items with all different colors

Question

I have build an UI where the user can specify the number of floors there are in his building, afterwards every menu-item represents a floor. This system works, but now I want every menu-item to have a different background-color and border-color.

I used Math.random to generate colors (which worked) but now everytime I reload a page, or go to another page all colors change, while I want random colors just once and from that first generation on the same colors every time.

So I want a system in Javascript (or Jquery) that generates colors once, depending on the number of floors and then use those colors all the time.

while(countEtages>=1) {
    var color ='#'+Math.random().toString(16).substr(2,6);
    menu_container.innerHTML += "<li style=\"width: " + width + ";background-color:" + color + ";\" class=\"menu-item "+((etage == etageNummer) ? 'active' : '')+"\" id=\"etage-" + etageNummer + "\"><a href=\"/etage.html?etage=" + etageNummer + "\">Etage " + etageNummer +"</a></li>";
    etageNummer++;
    countEtages--;
}

This is the code now (including the random colors)

I hope someone unerstands what I want and can help me.

Making random() generate the same sequence every time reloading page may involve using random ***seed***. However looks like there is not any seed supported for random() in js. You can try some self-defined functions like this question http://stackoverflow.com/questions/521295/javascript-random-seeds — King King, Oct 12 '14 at 23:24
Thanks for your comment. I am really new to Javascript (like three weeks) so I guess this 'seeding' is a bit out of range for now — Ian, Oct 12 '14 at 23:32

score 0 · Accepted Answer · edited Oct 12 '14 at 23:38

You can choose some colors you like and put them in an array longer than the max floor numbers, then access the array with the floor-count as the index.

Example:

var colors = ["#000000","#0000CC","#000033","#000066","#000099","#0000FF","#00CC00",
              "#00CCCC","#00CC33","#00CC66","#00CC99","#00CCFF","#003300","#0033CC",
              "#003333","#003366","#003399","#0033FF","#006600","#0066CC","#006633",
              "#006666","#006699","#0066FF","#009900","#0099CC","#009933","#009966",
              "#009999","#0099FF","#00FF00","#00FFCC","#00FF33","#00FF66","#00FF99",
              "#00FFFF","#CC0000","#CC00CC","#CC0033","#CC0066","#CC0099","#CC00FF",
              "#CCCC00","#CCCCCC","#CCCC33","#CCCC66","#CCCC99","#CCCCFF","#CC3300",
              "#CC33CC","#CC3333","#CC3366","#CC3399","#CC33FF","#CC6600","#CC66CC",
              "#CC6633","#CC6666","#CC6699","#CC66FF","#CC9900","#CC99CC","#CC9933",
              "#CC9966","#CC9999","#CC99FF","#CCFF00","#CCFFCC","#CCFF33","#CCFF66",
              "#CCFF99","#CCFFFF","#330000","#3300CC","#330033","#330066","#330099",
              "#3300FF","#33CC00","#33CCCC","#33CC33","#33CC66","#33CC99","#33CCFF",
              "#333300","#3333CC","#333333","#333366","#333399","#3333FF","#336600",
              "#3366CC","#336633","#336666","#336699","#3366FF","#339900","#3399CC",
              "#339933","#339966","#339999","#3399FF","#33FF00","#33FFCC","#33FF33",
              "#33FF66","#33FF99","#33FFFF","#660000","#6600CC","#660033","#660066",
              "#660099","#6600FF","#66CC00","#66CCCC","#66CC33","#66CC66","#66CC99",
              "#66CCFF","#663300","#6633CC","#663333","#663366","#663399","#6633FF",
              "#666600","#6666CC","#666633","#666666","#666699","#6666FF","#669900",
              "#6699CC","#669933","#669966","#669999","#6699FF","#66FF00","#66FFCC",
              "#66FF33","#66FF66","#66FF99","#66FFFF","#990000","#9900CC","#990033",
              "#990066","#990099","#9900FF","#99CC00","#99CCCC","#99CC33","#99CC66",
              "#99CC99","#99CCFF","#993300","#9933CC","#993333","#993366","#993399",
              "#9933FF","#996600","#9966CC","#996633","#996666","#996699","#9966FF",
              "#999900","#9999CC","#999933","#999966","#999999","#9999FF","#99FF00",
              "#99FFCC","#99FF33","#99FF66","#99FF99","#99FFFF","#FF0000","#FF00CC",
              "#FF0033","#FF0066","#FF0099","#FF00FF","#FFCC00","#FFCCCC","#FFCC33",
              "#FFCC66","#FFCC99","#FFCCFF","#FF3300","#FF33CC","#FF3333","#FF3366",
              "#FF3399","#FF33FF","#FF6600","#FF66CC","#FF6633","#FF6666","#FF6699",
              "#FF66FF","#FF9900","#FF99CC","#FF9933","#FF9966","#FF9999","#FF99FF",
              "#FFFF00","#FFFFCC","#FFFF33","#FFFF66","#FFFF99","#FFFFFF"]

while(countEtages>=1) {
    var color = colors[countEtages % colors.length];
    menu_container.innerHTML += "<li style=\"width: " + width + 
     ";background-color:" + color + ";\" class=\"menu-item "+
     ((etage == etageNummer) ? 'active' : '')+"\" id=\"etage-" + etageNummer + 
     "\"><a href=\"/etage.html?etage=" + etageNummer + "\">Etage " + etageNummer+ "</a></li>";
    etageNummer++;
    countEtages--;
}

I get what you're saying, thought about doing that, but the problem is that there isn't really a maximum amount of floors. They can fill in like a 100, and 100 menu-items will be generated — Ian, Oct 12 '14 at 23:30
Make a list of many colors, and then you can use the modulo operator to get an index (see edited answer), this means that if there are 100 colors, the 100th floor start at the first color again etc. — orhanhenrik, Oct 12 '14 at 23:33
This could be something to look at. I think 100 is a bit too much to choose, it would be fine if there were like 15 colors, but I get the idea. Thanks so far! — Ian, Oct 12 '14 at 23:36
@user2880096 there are about 216 colors for you, it should be enough :) — King King, Oct 12 '14 at 23:37
True, but now the menu-items will all look like each other, just a bit different than the one before him. So I guess I will change the colors anyway to make sure every color is totally different from the ones next to him (thanks for the effort, though) — Ian, Oct 12 '14 at 23:45

Héctor · Answer 2 · 2014-10-13T00:51:02.353

0

Try using cookies. This can be an example:

while(countEtages>=1) {
    var cookiecolor=getCookie("color"); // Get cookie
    if (color!="") { //check if cookie exist (yes)
      $('.menu-item').css(background-color,color);
    }else{ // cookie doesnt exists
     var color ='#'+Math.random().toString(16).substr(2,6);
     menu_container.innerHTML += "<li style=\"width: " + width + ";background-color:" + color + ";\" class=\"menu-item "+((etage == etageNummer) ? 'active' : '')+"\" id=\"etage-" + etageNummer + "\"><a href=\"/etage.html?etage=" + etageNummer + "\">Etage " + etageNummer +"</a></li>";
     etageNummer++;
     countEtages--;
     document.cookie="color="+color;
    }
}
function getCookie(cname) {
 var name = cname + "="; var ca = document.cookie.split(';'); 
 for(var i=0; i<ca.length; i++) {
  var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1);
  if (c.indexOf(name) != -1) return c.substring(name.length,c.length); 
 }
 return ""; }

If is the first time that you enter to your web you will create a color variable. This var will be stored in a cookie. If this cookie exist your script will read it and will change your menu color.

edited Oct 13 '14 at 00:51

answered Oct 12 '14 at 23:26

Héctor

509
2
7

Won't everytime the loop gets executed the variable 'color' be overwritten? – Ian Oct 12 '14 at 23:29
No, we use `if (color!="") { //check if cookie exist (yes)` for check if the color cookie exists. If it doesnt exists it will join to "else" where will create this color cookie. If the color cookie exist the script will use that var and never join to "else" (where we create/update the var) – Héctor Oct 12 '14 at 23:37
I am trying this now, but it says 'getCoockie is not defined' in the console – Ian Oct 12 '14 at 23:48
Because you should code getCookie function, try this: `function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i – Héctor Oct 12 '14 at 23:52
I think that it depends of your code. Try inside this: $( document ).ready(function() { // here }); – Héctor Oct 12 '14 at 23:59
1

@Héctor good point not to use undefined functions in answers. Should add your `getCookie()` method to the answer – charlietfl Oct 13 '14 at 00:03

Variable number of menu-items with all different colors

2 Answers2