Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > My color selector.

Reply
Thread Tools

My color selector.

 
 
Guest
Posts: n/a
 
      11-01-2004
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


 
Reply With Quote
 
 
 
 
Guest
Posts: n/a
 
      11-01-2004
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

<(E-Mail Removed)> 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
>
>



 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      11-01-2004
http://www.velocityreviews.com/forums/(E-Mail Removed) 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
 
Reply With Quote
 
Fred Oz
Guest
Posts: n/a
 
      11-01-2004
(E-Mail Removed) 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.
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-01-2004
(E-Mail Removed) 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.


 
Reply With Quote
 
Fred Oz
Guest
Posts: n/a
 
      11-02-2004
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., I'll leave it now until I can test the latest
version with OS X 10.4.

Cheers, Fred.









 
Reply With Quote
 
Fred Oz
Guest
Posts: n/a
 
      11-02-2004
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>
 
Reply With Quote
 
Guest
Posts: n/a
 
      11-03-2004

"Fred Oz" <(E-Mail Removed)> wrote in message
news:41879ef7$0$14779$(E-Mail Removed)...
> 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>



 
Reply With Quote
 
Fred Oz
Guest
Posts: n/a
 
      11-03-2004
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.
 
Reply With Quote
 
Fred Oz
Guest
Posts: n/a
 
      11-03-2004
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.



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Changing font color from current font color to black color Kamaljeet Saini Ruby 0 02-13-2009 04:58 PM
standard way of getting color # string from drawing.color? PJ6 ASP .Net 4 09-15-2005 06:10 PM
Color.white vs. Color.WHITE Niels Dybdahl Java 3 10-06-2004 03:21 PM
how to convert color in style "#e6e6e6" to color object in vb.net moondaddy ASP .Net 3 04-28-2004 04:59 AM
BGR Color to Java Color Andrew Arace Java 7 09-16-2003 05:30 PM



Advertisments