Javascript Coloured Blocks

On the front page of this website is a randomly rotating set of coloured blocks. The code for which is from a Web Developer article. However, the original article was written for Internet Explorer only, this tutorial covers the changes made to the script to make it browser independant.

There were two main changes that were needed to make this funcitonality cross-browser. The first was to replace the IE only references to document.all and the browser test in the changeCols() function. Having made the code compatible with non IE browsers, we simply need to add a space into each of the div's to ensure that they are actually rendered on screen by all browsers.

The final amended code can be seen below :

<script langugage="javascript">
backCol= new Array('#990000', '#808080', '#0066CC', '#009966', '#FFFFFF', '#66CC33', '#808080', '#330099', '#0099FF', '#FFFFFF', '#009966', '#990066', '#0066CC', '#FFFFFF', '#0066CC', '#66CC33', '#0066CC', '#0099FF', '#330099', '#009966', '#0099FF', '#0066CC', '#990066');
var i=0;
var j=0;
var noSq=32
var noCols=backCol.length
var delay=50
function randomvalue(high)
{
    return 1 + Math.floor(Math.random() * high);
}
function changeNow()
{
    var temp='div'+(randomvalue(noSq));
    document.allgetElementById(temp).style.backgroundColor=backCol[randomvalue(noCols)];
    changeCols()
}
function changeCols()
{
    if ((parseInt(navigator.appVersion)>3) && (navigator.appName == 'Microsoft Internet Explorer')){
        timer=setTimeout('changeNow()',delay)
    }
}
// onload functions
function loaded()
{
    changeCols();
}
</script>
 
<table border="0" cellspacing="3" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111">
    <tr>
        <td width="18px" height="18" ><div id=div1 style="width: 100%; background-color: #009933" >&nbsp;</div></td>
        <td width="18px" height="18" ><div id=div2 style="width: 100%; background-color: #808080"></div>&nbsp;</td>
        <td width="18px" height="18" ><div id=div3 style="width: 100%; background-color: #0066CC"></div>&nbsp;</td>
        <td width="18px" height="18" ><div id=div4 style="width: 100%; background-color: #009966"></div>&nbsp;</td>
        <td width="18px" height="18" ><div id=div5 style="width: 100%; background-color: #FFFFFF"></div>&nbsp;</td>
        <td width="18px" height="18" ><div id=div6 style="width: 100%; background-color: #0099FF"></div>&nbsp;</td>
        <td width="18px" height="18" ><div id=div7 style="width: 100%; background-color: #FFFFFF"></div>&nbsp;</td>
        <td width="18px" height="18" ><div id=div8 style="width: 100%; background-color: #66CC33"></div>&nbsp;</td>
    </tr>
</table>

Website Designed by Adservio Consulting Valid HTML 4.01 Strict    Valid CSS!    Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0