My color selector.

Just about finished with an include modual that allows a user to select
a color. Completely dynamic. all you have to do is include the script and
run the main trigger script.

One problem with the event modual is the fact that it resets events for all
TD's. not sure how to specify to cascade down through just the created
table. Any ideas?

Feel free to use this where ever you wish as long as you give me credit.
this was a few weeks of work to tweek correctly. Hopefully this makes up for
my poor menu from earlier. lol!

URL: http://www.shadowdruid.com/colors.html

Matthew Hagston

Ok, found the event problem and fixed / uploaded it. Still want to know
what you all think. Works in IE, NS7.2, and FireFox 0.9.3. Having an issue
with opera (of course). where it's not displaying the second "fine" selector
table. Bleh, always Opera.

-Matthew Hagston

<Ma************@cox.net> wrote in message
news:Tzhhd.2703$931.803@lakeread01...

Just about finished with an include modual that allows a user to select
a color. Completely dynamic. all you have to do is include the script and
run the main trigger script.

One problem with the event modual is the fact that it resets events for
all TD's. not sure how to specify to cascade down through just the created
table. Any ideas?

Feel free to use this where ever you wish as long as you give me credit.
this was a few weeks of work to tweek correctly. Hopefully this makes up
for my poor menu from earlier. lol!

URL: http://www.shadowdruid.com/colors.html

Matthew Hagston

[Randy Webb]

Ma************@cox.net wrote:

Ok, found the event problem and fixed / uploaded it. Still want to know
what you all think. Works in IE, NS7.2, and FireFox 0.9.3. Having an issue
with opera (of course). where it's not displaying the second "fine" selector
table. Bleh, always Opera.

Move the div below the table, or, off to the side. It causes the page to
jump when the GO button is clicked.

Instead of the repeated lookups of the bgcolor, use a variable to hold
it and then use the variable. Its a very minor issue in that script but
as scripts get larger, it can become important.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq

[Fred Oz]

Ma************@cox.net wrote:

Ok, found the event problem and fixed / uploaded it. Still want to know
what you all think. Works in IE, NS7.2, and FireFox 0.9.3. Having an issue
with opera (of course). where it's not displaying the second "fine" selector
table. Bleh, always Opera.

[...]

You still have an issue with Safari too - I'm not sure what it is, I'll
let you know if I find out.

Fred.

[rf]

Ma************@cox.net wrote:

URL: http://www.shadowdruid.com/colors.html

It seems a little, er, broken.

I select a nice shade of yellow on the left. The right bit changes (rightly)
to a luminance scale in that colour. When I click on the right I get a
colour. When I click on the right again, the right actually changes colour.

I expected it to remain the same but just give me different colours out of
the luminance scale with different click selections.

After several clicks all colour is gone, I am left with a greyscale.

Ah, I know... clicking on the right side causes another colour pick, which
rebulds the right, like this: click on a colour on the left. Click on the
right, either at the top or the bottom. Right changes.

--
Cheers
Richard.

[Matthew Hagston]

Would be appriciated if ya get it working in Safari too. I don't have a
way to test it, have access to school computers but alas, no time working &
school both full time. Fixed the opera problem late last night. apparently
it wanted width & height declared. Next version will try to migrate most of
it into style sheets so that it can be changed/reformated easier. Oh, and
that div, should be gone. was just there for testing anways. Put the whole
table inside a div so that it could be moved, formated & hidden easily.
Don't think it was nessisary, but may make it easier for some to use.

Yes, if you keep clicking the right hand 'fine tuning' color bar it will
re-display itself. Still wondering if i should keep that in or not, But it
seems to be good for when you want to select a greyscale color as the main
color pallet the grey's are kind of hidden everywhere.

--
Matthew Hagston
Hungates Creative Toys and Hobbies
ma************@hungates.com ........ http://www.hungates.com
"Fred Oz" <oz****@iinet.net.auau> wrote in message
news:41***********************@per-qv1-newsreader-01.iinet.net.au...

Ma************@cox.net wrote:

Ok, found the event problem and fixed / uploaded it. Still want to know what you all think. Works in IE, NS7.2, and FireFox 0.9.3. Having an issue with opera (of course). where it's not displaying the second "fine" selector table. Bleh, always Opera.

[...]

You still have an issue with Safari too - I'm not sure what it is, I'll
let you know if I find out.

Fred.

[Fred Oz]

Matthew Hagston wrote:

Would be appriciated if ya get it working in Safari too. I don't have a

[...]

Hey, I solved the Safari issue and can offer a couple of
significant enhancements to reduce processor effort.

*The Safari Issue:*

When you create an empty TD in safari and attach a mouseover event,
the area over which you must hover is about 1px high and as wide as the
cell. It seems to be aligned about where the baseline for text would
be. If you put text into the cell, whenever you are over the text then
the TD onmouseover function will not work, so the area that reacts to
the onmouseover is reduced even further.

One issue I can't fix is that when putting the colour into the showClr
cell, I can't get it to reliably fill the cell when clicking on the
table, but when I click the "Go" button it works fine or if I do
anything to cause the window to re-draw - resize window but not scroll.

To make the onmouseover area inside a TD be the entire cell height,
put a div inside the cell the same size as the cell. I couldn't get
bgColor to work on the div, so I left it to color the cell, the result
is the same (a coloured in cell). The relevant part of your code
becomes something like:

oTd = document.createElement("TD");
oTd.width = "4px";
oTd.height = "4px";
oTd.bgColor = "#"+ tmpar1[y];
oTd.border = "0px";
oTd.padding = "0px";
oDiv = document.createElement("DIV");
oDiv.style.width = "4px";
oDiv.style.height = "4px";
oDiv.id = tmpar1[y];
oTd.appendChild(oDiv);
oTr.appendChild(oTd);

Note you must use .style with the width and height, but not with the
TD (maybe someone else can answer that one). Also, the id gets put
onto the DIV so you can get the rgb (id) value from that, not the
bgColor.

You must attach the onmouseover to the DIV (the firstChild of the td):

x[i].firstChild.onmouseover = color_over;
x[i].firstChild.onmouseout = color_out;
x[i].firstChild.onclick = ChangeColorSelect;

Of course, all that may be too much effort...

One significant optimisation I can offer is in the way you get the id
of the cell for the onmouseover, onmouseout and onclick events:

e.g.

function color_over(e) {
targid = (ie)?window.event.toElement.id:e.target.id;
clr = document.getElementById(targid).bgColor;
clr = clr.substr(1);
document.getElementById('colorsel').value = clr;
}

*Enhancement 1*
Can be signficantly enhanced by creating a global variable that refers
to 'colorsel', then you only have to get a reference for it once and do
not need to do getElementById every time the mouse enters a cell (an
increadible waste of processor power).

*Enhancement 2*
Probably greater enhancement is to change the way you use the reference
to the cell (e.target) to get the id, just so you can use
getElementById to get the reference to the cell that you already had!!

So do this:

// Just after calling InitColorPalette();
// create a global ref to the colorsel text box

colorSel = document.getElementById('colorsel');

// Then change color_over to:

function color_over(e) {
if (ie) {
// do whatever IE needs
} else {
colorSel.value = e.target.id;
}
}

Of course you still need to handle IE (maybe, I didn't test) but at
least for all other browsers the work is hugely reduced.

You can make similar changes to wherever you have used e.target then
getElementById.

That's it for me, I think there are a few bugs with Safari 1.0.3 (comes
with OS X 10.2.8), I'll leave it now until I can test the latest
version with OS X 10.4.

Cheers, Fred.

[Fred Oz]

Matthew Hagston wrote:

Would be appriciated if ya get it working in Safari too. I don't have a

[...]

It seems your .bgColor should be .style.backgroundColor - it certainly
works for Safari (scratch one maybe-bug). Check here:

<URL:http://www.mozilla.org/docs/dom/domref/dom_style_ref.html>

"Fred Oz" <oz****@iinet.net.auau> wrote in message
news:41***********************@per-qv1-newsreader-01.iinet.net.au...

Matthew Hagston wrote:

Would be appriciated if ya get it working in Safari too. I don't have
a [...]

It seems your .bgColor should be .style.backgroundColor - it certainly
works for Safari (scratch one maybe-bug). Check here:

For TD's I believe it should be bgColor. not referencing the style, just
the TD itself. Haven't checked that with w3c references yet though. putting
a DIV inside the TD to do the mouse-overs one would have to use
style.backgroundColor anyways so one fix kind of self-corrects the next bug.
Don't have time to write the fix at the moment, have some other changes in
mind to do at the same time. Specifically something that allows you to show
less colors in the primary window. the 34x32 is kind of intensive for some
computers it seems.
<URL:http://www.mozilla.org/docs/dom/domref/dom_style_ref.html>

[Fred Oz]

Matthew Hagston wrote:

Would be appriciated if ya get it working in Safari too. I don't have a

[...]

After quite a bit of playing, I can further recommend:

1. You use style.backgroundColor everywhere instead of .bgColor

2. Set all backgrounds as rgb(r,g,b) values

3. You do not need to set or read the id of any table cells to get
their colour, just refer directly to style.backgroundColor. You only
need the id of the cells that you want to write to, everything else
just grabs the backgroundColor. If you set the background using
rgb(...) IE will return rgb(...), Firefox will return rgb(...) whether
you use rgb(...) or #rrggbb.

4. Modify functions as follows:

colorSel = document.getElementById('colorsel');

function color_over(e) {
colorSel.value = (ie)?
window.event.toElement.style.backgroundColor :
e.target.style.backgroundColor;
}

function color_out(e) {
colorSel.value = "";
}

Do similar to all other places where you read the id to get the
background colour.

All tested in IE and Firefox. I can supply full working code if you
like, but I'll need a couple of hours to test in Safari first (and
re-apply the DIV fix if still needed).

Cheers, Fred.

[Matthew Hagston]

[snipped signatures]

Matthew Hagston wrote:

Would be appriciated if ya get it working in Safari too. I don't

have a [...]

After quite a bit of playing, I can further recommend:

1. You use style.backgroundColor everywhere instead of .bgColor
Ok, will Make this modification this weekend. Will also add the DIV tag
inside all of the TD's in order to fix the mouse-over/mouse-click problems.

2. Set all backgrounds as rgb(r,g,b) values
I thought that I had tried this but it wouldn't work in Firefox but will
give it another try. Would be nice to get this to work as it would take out
some stupid hex-converting code.

3. You do not need to set or read the id of any table cells to get
their colour, just refer directly to style.backgroundColor. You only
need the id of the cells that you want to write to, everything else
just grabs the backgroundColor. If you set the background using
rgb(...) IE will return rgb(...), Firefox will return rgb(...) whether
you use rgb(...) or #rrggbb.
Good suggestion. Just habbit i guess to set the ID, but really isn't
nessisary as you point out. Will remove.

4. Modify functions as follows:

colorSel = document.getElementById('colorsel');

function color_over(e) {
colorSel.value = (ie)?
window.event.toElement.style.backgroundColor :
e.target.style.backgroundColor;
}

function color_out(e) {
colorSel.value = "";
}

Do similar to all other places where you read the id to get the
background colour.

All tested in IE and Firefox. I can supply full working code if you
like, but I'll need a couple of hours to test in Safari first (and
re-apply the DIV fix if still needed).

Cheers, Fred.

Going to keep in the mouse-over color-display. Due to the fact that i
want it to display the actual color as you mouse over, not just the #000000
value. Just not sure how to display this. Perhaps i will make 3 cells on the
top row, 1 for the #input & go button (manual input which i need to add).
2nd TD to display the mouse over, 3rd TD to display the currently selected
color.

Thanks for the help with this and the suggestions. :-)

-Matthew Hagston

[Fred Oz]

Matthew Hagston wrote:
[...]

2. Set all backgrounds as rgb(r,g,b) values
I thought that I had tried this but it wouldn't work in Firefox but will
give it another try. Would be nice to get this to work as it would take out
some stupid hex-converting code.

Good, but when you read the backgroundColour in Safari, it will be in
#rrggbb regardless of how you set it(!!!). In the changeColorSelect()
function you need an if statement to see how the colour has come back:

if (clr.substr(0,3) == 'rgb') {
var b = clr.substr(4);
b = b.substr(0,b.length-1);
var x = b.split(',')
cn1 = x[0];
cn2 = x[1];
cn3 = x[2];

// Otherwise, must be #rrggbb so convert from hex
} else {
var b = clr.substr(1);
cn1 = parseInt(b.substr(0, 2), 16);
cn2 = parseInt(b.substr(2, 2), 16);
cn3 = parseInt(b.substr(4, 2), 16);
}

But elsewhere you can remove the hex conversion unless you want a
readout in hex, so that:

ca = parseInt(c1).toString(16);
cb = parseInt(c2).toString(16);
cc = parseInt(c3).toString(16);
if (ca.length <2) { ca = "0" + ca; }
if (cb.length <2) { cb = "0" + cb; }
if (cc.length <2) { cc = "0" + cc; }
ct = ca + cb + cc;

is replaced by:

ct = 'rgb('
+ parseInt(c1,10) + ','
+ parseInt(c2,10) + ','
+ parseInt(c3,10) + ')';

You could probably use a string method to truncate c1, c2, c3 rather
than using parseInt and save a few more cycles.

Another that may help is to change:

c1 = c1 - o1; c2 = c2 - o2; c3 = c3 - o3;

to:

c1 -= o1; c2 -= o2; c3 -= o3;

in all the places it appears.

[...]

just grabs the backgroundColor. If you set the background using
rgb(...) IE will return rgb(...), Firefox will return rgb(...) whether
you use rgb(...) or #rrggbb.

And Safari always gives #rrggbb (arrgghh).

[...]
Going to keep in the mouse-over color-display. Due to the fact that i
want it to display the actual color as you mouse over, not just the #000000
value. Just not sure how to display this. Perhaps i will make 3 cells on the
top row, 1 for the #input & go button (manual input which i need to add).
2nd TD to display the mouse over, 3rd TD to display the currently selected
color.

[...]

Good idea. I have played with lots of optimisations but to keep IE,
Firefox and Safari all behaving is tough. Even adding the events
whilst building the tables was no faster than your current method of
building the tables, then adding the events (though to my mind it
should be). Putting the divs inside the tds slows things a bit.

I have been testing on some slow platforms (PIII 500 MHz & G3
400MHz)where it takes 4 seconds to run ChangeColorSelect each time you
click, so I notice performance...

Cheers, Fred.

[Matthew Hagston]

"Fred Oz" <Oz****@iinet.net.auau> wrote in message
news:2S*****************@news.optus.net.au...

Matthew Hagston wrote:
[...]

2. Set all backgrounds as rgb(r,g,b) values

I thought that I had tried this but it wouldn't work in Firefox but will

give it another try. Would be nice to get this to work as it would take out some stupid hex-converting code.

Good, but when you read the backgroundColour in Safari, it will be in
#rrggbb regardless of how you set it(!!!). In the changeColorSelect()
function you need an if statement to see how the colour has come back:

if (clr.substr(0,3) == 'rgb') {
var b = clr.substr(4);
b = b.substr(0,b.length-1);
var x = b.split(',')
cn1 = x[0];
cn2 = x[1];
cn3 = x[2];

// Otherwise, must be #rrggbb so convert from hex
} else {
var b = clr.substr(1);
cn1 = parseInt(b.substr(0, 2), 16);
cn2 = parseInt(b.substr(2, 2), 16);
cn3 = parseInt(b.substr(4, 2), 16);
}

But elsewhere you can remove the hex conversion unless you want a
readout in hex, so that:

ca = parseInt(c1).toString(16);
cb = parseInt(c2).toString(16);
cc = parseInt(c3).toString(16);
if (ca.length <2) { ca = "0" + ca; }
if (cb.length <2) { cb = "0" + cb; }
if (cc.length <2) { cc = "0" + cc; }
ct = ca + cb + cc;

is replaced by:

ct = 'rgb('
+ parseInt(c1,10) + ','
+ parseInt(c2,10) + ','
+ parseInt(c3,10) + ')';

You could probably use a string method to truncate c1, c2, c3 rather
than using parseInt and save a few more cycles.

Another that may help is to change:

c1 = c1 - o1; c2 = c2 - o2; c3 = c3 - o3;

to:

c1 -= o1; c2 -= o2; c3 -= o3;

in all the places it appears.

[...] just grabs the backgroundColor. If you set the background using
rgb(...) IE will return rgb(...), Firefox will return rgb(...) whether
you use rgb(...) or #rrggbb.
And Safari always gives #rrggbb (arrgghh).

[...]

Going to keep in the mouse-over color-display. Due to the fact that

i want it to display the actual color as you mouse over, not just the #000000 value. Just not sure how to display this. Perhaps i will make 3 cells on the top row, 1 for the #input & go button (manual input which i need to add). 2nd TD to display the mouse over, 3rd TD to display the currently selected color.

[...]

Good idea. I have played with lots of optimisations but to keep IE,
Firefox and Safari all behaving is tough. Even adding the events
whilst building the tables was no faster than your current method of
building the tables, then adding the events (though to my mind it
should be). Putting the divs inside the tds slows things a bit.

I have been testing on some slow platforms (PIII 500 MHz & G3
400MHz)where it takes 4 seconds to run ChangeColorSelect each time you
click, so I notice performance...

Cheers, Fred.

Just thinking, could nearly get rid of the table if using divs, though
it requires more work I will play with an alternate version to do this.
Should just be setting the Div to relative and then BR for each new line.
could end up looking slopy but 'should' be workable. Oh, and even on my
machine the change-color is a bit slow and it's 2.1ghz. so yeah, there's
still an issue there. Started working on this because i was making an
in-page html editor type thing, basicly just an over-rated rich text box.
All the color selectors i did fine pretty much sucked. Getting close to the
weekend so I can make all these changes. Need to get my shadowdruid site
back online. bleh! Stupid webhost dumped all my data. *cries*
--
Matthew Hagston
Hungates Creative Toys and Hobbies
ma************@hungates.com ........ http://www.hungates.com

[Fred Oz]

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 = "&nbsp;";
}

function wColour2(d) {
document.getElementById('readout').innerHTML = d.style.backgroundColor;
}

function wOut2() {
document.getElementById('readout').innerHTML = "&nbsp;";
}

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">&nbsp;</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>

[Fred Oz]

Fred Oz wrote:
[...]

oDiv.style.overflow = "hidden";

This is critical in IE, otherwise the divs will be lineheight
regardless of the height you specify.

Oh yeah, tested in Firefox, IE 6 an Safari so should be pretty robust
(sorry no Opera but you seem to know the issues there...)

Fred.

[Matthew Hagston]

"Fred Oz" <oz****@iinet.net.auau> wrote in message
news:41**********************@per-qv1-newsreader-01.iinet.net.au...

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.
Aye, will stick with DOM, far as i know innerHTML is suppose to be phased
out anyways which is why I switched from using it. Firefox generates
everything fast, ;-) it even handles the events a lot faster than IE does.
The way i was thinking of generating the DIV's is pretty simple, Should be
able to just utilize a master div (to go where the <TABLE> tag is generated.
it's position is set to relative, or absolute. shouldn't matter. Then
generate a series of divs with position: relative inside those. top:0; left:
0; top: 0; left: 4, top: 0; left: 8;....ect. just keeps track of a masterX,
and masterY, and adds' 4 to that. (since it's the current width & height).
Would be farily easy to modify to make it more dynamic and change the # of
colors. Would only be so many different 'styles' or # of colors you would be
able to change too due to the math. I need to come up with the math to
generate a table of 'web-safe' colors also. Give the person using the code a
few more options. Also thought would be kind of cool to have an 'advanced'
option with 3 slide bars, Red Blue & Green. But those two things are after
the initial bugs are worked out.
--
Matthew Hagston
Hungates Creative Toys and Hobbies
ma************@hungates.com ........ http://www.hungates.com
<!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 = "&nbsp;";
}

function wColour2(d) {
document.getElementById('readout').innerHTML = d.style.backgroundColor;
}

function wOut2() {
document.getElementById('readout').innerHTML = "&nbsp;";
}

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">&nbsp;</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>