Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Random color in jQuery

So i've put a header that minimizes when i scroll down, and grow back when scroll up. When the header collapses, it turns light gray, and when opens, changes it's color back. Here's the code i found:

$(window).scroll(function () {
 if ($(document).scrollTop() == 0) {
 $('#header_nav').removeClass('tiny');
 } else {
 $('#header_nav').addClass('tiny');
 }
});

I want the header to change it's color randomly when i refresh the page, but i would like to use exact colors. I found out how to change the background color, i could, for the 'tiny' header, but i'm too dumb to jQuery yet, so i couldn't write the color randomizer and then insert it to the code above.

Would you help me? Thank you for your help in advance :)

like image 962
barnade95 Avatar asked Dec 12 '13 19:12

barnade95


2 Answers

Hi you can use a function like this on Jquery:

$(document).ready(function () {
  var back = ["#ff0000","blue","gray"];
  var rand = back[Math.floor(Math.random() * back.length)];
  $('div').css('background',rand);
})

There on the var back you can write all exact colors you want. Then instead of $('div') you can set the selector for your header.

Check this demo http://jsfiddle.net/sJTHc/5/

like image 69
DaniP Avatar answered Oct 18 '22 14:10

DaniP


var randomColor = Math.floor(Math.random()*16777215).toString(16);

like image 21
Gašper Gračner Avatar answered Oct 18 '22 13:10

Gašper Gračner