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 ), 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.

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.

• javascript
• html
• css
• header
• background-color

• 2 Don't just don't use document.write, it is tooooo old school meanwhile. – VisioN Commented Apr 11, 2013 at 23:10
• why dont you just create the header as regular html and then just edit the background-color by script (find it by id or class)? – trajce Commented Apr 11, 2013 at 23:12
• That would work, I think. How can I do that, trajce? I'm sorry but I'm just a beginner at javascript – Gus Commented Apr 11, 2013 at 23:16
• 1 @Gus , can you try this resolution? I have found it and it looks similar to what your are looking for. Check it out – Mee Commented Apr 11, 2013 at 23:17
• That worked, Mee! Many thanks for the help you all! The layout is still broken but I guess I can get around that now. – Gus Commented Apr 11, 2013 at 23:26

3 Answers 3

Though the post is little old but my answer may help others who would land here just like me!! DEMO HTML:

<div style="height:150px">
  <div>
    <h1><center>That's how i change color!!</center></h1>
  </div>
  <br><br>
  <div  class="bordered" id="fancy">
    <center>I behave like a chameleon!!</center>
  </div>
</div>

JS:

setInterval(function () { 
  document.getElementById("fancy").style.background= '#'+Math.floor(Math.random()*16777215).toString(16);
  document.body.style.background= '#'+Math.floor(Math.random()*16777215).toString(16);  
}, 1000);

Hope this would help someone!!

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/ryanbrill/GD3qB/

function changecolor() {
    var colors = ["#B40404", "#0000FF", "#FE2E9A", "#FF0080", "#2EFE2E", ];
    var rand = Math.floor(Math.random() * colors.length);
    $('#controls-wrapper').css("background-color", colors[rand]);
    setTimeout('changecolor()', 1000);
}