Matthew Hagston wrote:
[...]
> Just thinking, could nearly get rid of the table if using divs, though
[...]
You must be psychic - I thought exactly the same thing. Here's
something to get you started - all the colour box parameters are
dynamic so you can play with the number of columns and rows. I just
use a crappy algorithm to get some different colours, of course you
will want to use yours.
The position of each div is calculated, just put the enclosing div
wherever you want on the page, the rest will be inside it.
I built it to test if using DOM create methods was faster than
innerHTML, here's my results, yours may differ:
Using Firefox DOM create as a base of 10, innerHTML is about 3 (i.e.
renders in 1/3 the time) - it's amazingly fast. IE is about 12
regardless of which method is used, Safari is about 10 with DOM and 30
with innerHTML (really slow with innerHTML).
I'd stick with DOM for best all round performance.
I meant to also test creating a table as per your original, but didn't
get around to it.
Fred.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Div Boxes</title>
<script type="text/javascript">
function buildBox(p,l,c,w,wu,h,hu) {
for (var i=0; i<l; i++) {
var r = Math.floor(255*i/l); // red component of colour
var x = i*h; // position from top
// Do cells
for (var j=0; j<c; j++) {
var y = j*w; // position from left
var g = Math.floor(255*j/c); // green bit of colour
var b = Math.floor(255-(r+g)/2); // red bit of colour
oDiv = document.createElement("DIV");
oDiv.style.width = w + wu;
oDiv.style.height = h + hu;
oDiv.style.position = "absolute";
oDiv.style.top = x + hu;
oDiv.style.left = y + hu;
oDiv.style.backgroundColor = "rgb("+r+","+g+","+b+")";
oDiv.style.overflow = "hidden";
oDiv.id = i+'-'+j;
oDiv.onmouseover = wColour;
oDiv.onmouseout = wOut;
document.getElementById(p).appendChild(oDiv);
} } }
function buildBox2(p,l,c,w,wu,h,hu) {
var hStr = '';
for (var i=0; i<l; i++) {
var r = Math.floor(255*i/l); // red component of colour
var x = i*h; // position from top
// Do cells
for (var j=0; j<c; j++) {
var y = j*w; // position from left
var g = Math.floor(255*j/c); // green bit of colour
var b = Math.floor(255-(r+g)/2); // red bit of colour
var ih = ['<div style="',
'width: ' + w + wu + '; ',
'height: ' + h + hu + '; ',
'position: absolute; ',
'top: ' + x + hu+'; ',
'left: ' + y + hu + '; ',
'background-color: rgb('+r+','+g+','+b+'); ',
'overflow: hidden;',
'" ',
// end of styles
' id="' + i + '-' + j + '" ',
'onmouseover="wColour2(this)" ',
'onmouseout="wOut2()" ',
'></div>',
]
hStr += ih.join('');
}
}
// alert(hStr);
document.getElementById(p).innerHTML = hStr;
}
ie = document.all;
function wColour(e) {
targ = (ie)?window.event.toElement:e.target;
document.getElementById('readout').innerHTML =
targ.style.backgroundColor;
}
function wOut() {
document.getElementById('readout').innerHTML = " ";
}
function wColour2(d) {
document.getElementById('readout').innerHTML = d.style.backgroundColor;
}
function wOut2() {
document.getElementById('readout').innerHTML = " ";
}
function moveBox(p,l,c,w,wu,h,hu) {
alert(document.getElementById(p).style.top);
document.getElementById(p).style.top = l*h + hu;
}
</script>
</head>
<body >
<form action="">
<input type="text" name="nR" cols="5" value="33">Rows</input><br>
<input type="text" name="nC" cols="5" value="33">Columns</input><br>
<input type="text" name="nW" cols="5" value="4">Width (px)</input><br>
<input type="text" name="nH" cols="5"
value="4">Height (px)</input><br>
<input type="button" value="Click to build" onclick="
buildBox('master',this.form.nR.value,this.form.nC. value,
this.form.nW.value,'px',this.form.nH.value,'px');
">
<input type="button" value="Click to move" onclick="
moveBox('master',this.form.nR.value,this.form.nC.v alue,
this.form.nW.value,'px',this.form.nH.value,'px');
"><br>
<input type="button" value="Click to build2" onclick="
buildBox2('master2',this.form.nR.value,this.form.n C.value,
this.form.nW.value,'px',this.form.nH.value,'px');
">
<input type="button" value="Click to move2" onclick="
moveBox('master2',this.form.nR.value,this.form.nC. value,
this.form.nW.value,'px',this.form.nH.value,'px');
"><br>
</form>
<div style="position: relative; background-color: #ffffdd;"><span
id="readout"> </span></div><br>
<div id="master" style="position: relative; background-color: #0000ff;
line-height: 0pt;">
</div><br>
<div id="master2" style="position: relative; background-color: #ff0000;
line-height: 0pt;">
</div>
</body>
</html>
Similar Threads
