CODEWITHSUNDEEP
javascriptjqueryhtmlcss
barnade95
barnade95

Reputation: 109

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 :)

Upvotes: 7

Views: 46673

Answers (5)

Zaw Hlaing Bwar
Zaw Hlaing Bwar

Reputation: 97

var rand = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f' ];
var color = '#' + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)];

Use That Jquery Code and callcolor for random color.
Example: var RandColor = color;
Hope it helps.

Upvotes: 1

AndreFelipeCL
AndreFelipeCL

Reputation: 61

$(function() {
  $("#random_color").click(function() {
    $(".bola").each(function(index) {
      var colorR = Math.floor((Math.random() * 256));
      var colorG = Math.floor((Math.random() * 256));
      var colorB = Math.floor((Math.random() * 256));
      $(this).css("background-color", "rgb(" + colorR + "," + colorG + "," + colorB + ")");
    });
  });
});
html {
  height: 100%
}
body {
  background-color: #fff;
  height: 100%;
  margin: 0px auto;
  width: 800px;
}
#b0 {
  float: left;
  background-color: #DCDCDC;
  width: 100%;
  height: 100%
}
.linha {
  float: left;
  width: 100%;
  margin-bottom: 10px
}
.bola {
  float: left;
  background-color: #fff;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border: 2px solid #000;
  border-radius: 10px;
  cursor: pointer
}
.bolaSel {
  border: 2px solid #0000FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='b0'>
  <div id='b1'>
    <button id="random_color">Sortear cores</button>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
    <div class='linha'>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
      <div class='bola'></div>
    </div>
  </div>
</div>

You can add a fourth variable to set transparency, however you need use "rgba(varR,varG,varR,transparency);" instead of common rgb

Upvotes: 5

Gašper Gračner
Gašper Gračner

Reputation: 141

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

Upvotes: 13

douweegbertje
douweegbertje

Reputation: 86

Ive made the script but also included some changes. In your code, you would append multiple classes 'tiny' since the event gets trigged by every scrollmovement. Ive just added a class and I first check if this class has been set. If it has not been set, then I will change the color on the scroll. If you remove the 'check', the color would change every scrollmovement, which can be very cool if you aint epileptic :)

    // array with the colors, you can add the colors here.      
var colors = ["red", "blue", "yellow", "black", "green"];

$(window).scroll(function () {
     if ($(document).scrollTop() == 0) 
     {
        //if scrollbar is at the top (doing nothing atm)
     } 
     else if($( "#header_nav" ).hasClass( "colorSet" ))
     {
        //if the colorSet class has been apended (remove this, if you want some fun :))
     }
     else
     {
        //first, add the class, so we know we do not have to walk tru this anymore.
        $('#header_nav').addClass('colorSet');

        // Apend a CSS background-color based on a rand function on our color array
        $('#header_nav').css( "background-color", colors[Math.floor(Math.random() * colors.length)] );
     }
});

Now if you want, you can alter the first if statement (scrollTop() ). If you remove the colorSet class here, you will get a new random color if someone scrolls down -> top -> down again.

For multiple classes with random colors;

    // array with the colors, you can add the colors here.      
var colors = ["red", "blue", "yellow", "black", "green"];

$(window).scroll(function () {
     if ($(document).scrollTop() == 0) 
     {
        //if scrollbar is at the top (doing nothing atm)
     } 
     else if($( "#header_nav" ).hasClass( "colorSet" ))
     {
        //if the colorSet class has been apended (remove this, if you want some fun :))
     }
     else
     {
        //first, add the class, so we know we do not have to walk tru this anymore.
        $('#header_nav').addClass('colorSet');

        // Apend a CSS background-color based on a rand function on our color array
        $('#header_nav').css( "background-color", colors[Math.floor(Math.random() * colors.length)] );
        $('.header').css( "background-color", colors[Math.floor(Math.random() * colors.length)] );
        $('.header.tiny').css( "background-color", colors[Math.floor(Math.random() * colors.length)] );
     }
});

And for multiple classes who share the same color;

// array with the colors, you can add the colors here.      
var colors = ["red", "blue", "yellow", "black", "green"];

$(window).scroll(function () {
     if ($(document).scrollTop() == 0) 
     {
        //if scrollbar is at the top (doing nothing atm)
     } 
     else if($( "#header_nav" ).hasClass( "colorSet" ))
     {
        //if the colorSet class has been apended (remove this, if you want some fun :))
     }
     else
     {
        //first, add the class, so we know we do not have to walk tru this anymore.
        $('#header_nav').addClass('colorSet');

        var color = colors[Math.floor(Math.random() * colors.length)];
        // Apend a CSS background-color based on a rand function on our color array
        $('#header_nav').css( "background-color", color  );
        $('.header').css( "background-color", color );
        $('.header.tiny').css( "background-color", color );
     }
});

Upvotes: 0

DaniP
DaniP

Reputation: 38252

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/

Upvotes: 18

Related Questions