this.style.backgroundColor returns rgb but...

[fallen angel]

halu there!! i'm a 1month experienced java scripter but got a good hang of it already. hehehe.. i developed a "color selection" tool, similar to the one in flash when you choose a color for a graphic, with CSS only. the product is finished. whenever i select a color, its color will be displayed in a box whose id name is contained in variable "color_box" and the equivalent color value will appear in a text box with id contained in the variable "color_text" but only in rgb format.

it's here, check it out: http://glitzy3.com/layouts.php (FIREFOX ONLY)

this.style.backgroundColor returns an RGB value like rgb(255,255,255) but i want it to return a hex value like #FFFFFF. is that possible without having to go through a "RGB2HEX" function? i can't use a function no more because my code seems to be too complex that it won't "fit" or work anymore if i include a function which returns the hex.

this is a part of the script within a function, which receives two values,

function(color_box, color_text):
....
var color="this.style.backgroundColor";
....
color_table = color_table.concat("<td onclick=\"show_color_table(false)\" onmouseover=\"this.style.cursor=\'help\',document.getElementById(\'",color_text,"\').value=",color,",document.getElementById(\'",color_box,"\').style.backgroundColor=",color,"\" style=\"background-color:rgb(");
        color_table = color_table.concat(R,",",G,",",B,");\"></td>");

....
the bold portion is the problem. i cant use RGBToHEX(color) because the value of color sent to the function RGBToHex will not anymore be the color value but the text "this.style.backgroundColor". so it seems that the variable is far away from getting the actual this.style.backgroundColor if i put a function.

check out my code its in a php document at:
http://glitzy3.com/layouts.php (view with FireFox NOT IE)

AH SINCE I DIDN'T REALIZE THAT MY CODE DOENST WORK IN INTERNET EXPLORER, COULD YOU PLEASE GIVE ME THE "SOURCE CODE" IN MY CODE THAT CAUSED THE MISERY?

[pbmods]

Heya, Fallen Angel. Welcome to TSDN!

Please use CODE tags when posting source code:

[CODE=javascript]
JavaScript code goes here.
[/CODE]

[pbmods]

Did you put a '#' in front of the hex code?

document.getElementById(' ... ').style.backgroundColor = '#' + hexCode;
 

[fallen angel]

Did you put a '#' in front of the hex code?

document.getElementById(' ... ').style.backgroundColor = '#' + hexCode;
 

oops, sorry for not putting the <code=javascript> i didnt know hehe..

yeah i used # in front of the hex for the first three table color columns and for the rest i had to use rgb(xxx,yyy,zzz), but EITHER WAY i use, this.style.backgroundColor, will always return rgb(xxx,yyy,zzz) in firefox and #XXYYZZ in IE as i researched. can FF not return #XXYYZZ?

in the bold portion of my code in color, i tried passing color in function like this: RGBToHex(color)

and if i use function as:

function RGBToHEX(str){
    return str;
}
 

it just works fine in that it just returns the passed value. BUT if i try to put methods on function variable "str" like:
str = str.slice(4) (which is supposed to return xxx,yyy,zzz) with rgb( stripped off,
then it will never return anything. i tried any string methods, it won't return anything.

Maybe it has something to do like when i receive a color rgb(xxx,yyy,zzz), it cannot be edited as string. do i have to convert it to a string or something to be able to apply string methods to it?

[fallen angel]

ah nevermind.. it's ok, i solved it, i included the RGBToHex into the string instead of concatenating it. this is the way i did it (bold part):

color_table = color_table.concat("<td onclick=\"show_color_table(false)\" onmouseover=\"this.style.cursor=\'help\',document.getElementById(\'",color_text,"\').value=RGBToHEX(",color,"),document.getElementById(\'",color_box,"\').style.backgroundColor=",color,"\" style=\"background-color:rgb(");
        color_table = color_table.concat(R,",",G,",",B,");\"></td>");
 

the problem now is that my product does not work in IE. does IE even support javascript. or what is wrong with my code that makes it not work in IE?

[dmjpro]

Have a look at this.

function RGBtoHEX(str)
{
 var arr = str.split(",");
 var r = arr[0].substring(4),
 g = arr[1],
 b = arr[2].substring(0,arr[2].length-1);
 return "#"+r+g+b;
}
 

Good Luck!

Kind regards,
Dmjpro.

[fallen angel]

wow!! i didn't know that the split function was that powerful, in fact its the first time i used it. hehehe...

i just added an additional function that converts your #255255255 to #FFFFFF
with the DECToHex function:

 
return "#" + DECToHEX(r) + DECToHEX(g) + DECToHEX(b)
 
function DECToHEX(N) {
    hex_set = "0123456789ABCDEF"
     return hex_set.charAt((N-N%16)/16) + hex_set.charAt(N%16);
}
 

thanx alot DMJPRO for that very efficient code!