Gus Gus - 5 months ago 11
CSS Question

How to make a div's background color randomly change when the page refreshes

this is my first question here so excuse me if I did anything wrong.
I'm doing the layout of a website and I want the header to change colors randomly when the user refresh the page. I already did some research and got these javascript codes:

<script type="text/javascript">
var randnum = Math.random();
var inum = 2;
var rand1 = Math.round(randnum * (inum-1)) + 1;
var colors = new Array;
colors[1] = "#385c78";
colors[2] ="#9d302f";
var color = colors[rand1]
document.getElementById('navbar').style.backgroundColor = image;
</script>


This one goes inside the head tag. It picks a random hexadecimal code between the two ones I want and store it on the var color.

The second one I'm using goes on the body.

<script type="text/javascript">
//writes "<div id="header" style="background-color:#something">"
document.write('<div id="header" style="background-color:' + color + '">')
</script>
<!-- continuation of div id="navbar" -->
*Header code here*
</div>


The problem is that this way of doing it is giving me some troubles, since the div id="header" is written inside javascript. I can't wrap other divs properly and Google Chrome's inspect element tells me that the body size is 1333px x 80px (as it can be seen here http://puu.sh/2yjKi), exactly and only the header size, and it doesn't wraps the rest of the website content.
So my question is: Is there any way to improve that code? Make the background color of that div change via javascript or something like that?

I thank you all in advance for reading and appreciate your help.

Answer

Output your header as normal HTML, and then use JavaScript to update the color onDomReady. Something about like this:

$(document).ready(function() {
    var colors = ["#385c78", "#9d302f"],
    selectedColor = colors[Math.floor(Math.random()*colors.length)]
    header = $("div#header");

    header.css("background-color", selectedColor);
});

http://jsfiddle.net/ryanbrill/GD3qB/