My color selector.

[Guest]

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

 

[Guest]

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

 

[Randy Webb]

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.

 

[Fred Oz]

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]

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.

 

[Fred Oz]

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.firstChild.onmouseover = color_over;
x.firstChild.onmouseout = color_out;
x.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]

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>

 

[Guest]

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.

 

[Fred Oz]

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.

 

[Fred Oz]

Matthew Hagston wrote:
[...]

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.

[...]
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.

 

[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.value,
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.nC.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.