setting background color convert from rgb to hex

[unomateo]

I'm using javascript to allow users to set the background color of a table.

the problem is, when I set the background color, I use hex (#ffffff), but after it is set as background-color, it converts to rgb(255,255,255)

function change_inner_body(color)
{
alert(color)
//this displays #ffffff
document.getElementById('inner_body').style.backgroundColor=color;
alert(document.getElementById('inner_body').style.backgroundColor);
//this displays rgb(255, 255, 255)
}

it has to be in hex... what can I do?

 

[kaht]

I wrote this a long time ago, it will do what you're wanting:

function rgbConvert(str) {
   str = str.replace(/rgb\(|\)/g, "").split(",");
   str[0] = parseInt(str[0], 10).toString(16).toLowerCase();
   str[1] = parseInt(str[1], 10).toString(16).toLowerCase();
   str[2] = parseInt(str[2], 10).toString(16).toLowerCase();
   str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
   str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
   str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
   return ('#' + str.join(""));
}

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[unomateo]

Hi, thanks, but I found another script that converted to hex, but there is something with style.backgroundColor that changes it.

I had to user document.getElementById('inner_body').bgColor = color

That seems to not change it to rgb.

will the above script work to make a color a few shades darker?

for example, set the background as a light gray, then automatically set the font color a darker shade of gray, but still the same hue so they match

Matt

 

[kaht]

All my function does is convert the value returned back to a hex value.

So, you can change your function you originally had to compensate for the function to make it return a hex value:

function rgbConvert(str) {
   str = str.replace(/rgb\(|\)/g, "").split(",");
   str[0] = parseInt(str[0], 10).toString(16).toLowerCase();
   str[1] = parseInt(str[1], 10).toString(16).toLowerCase();
   str[2] = parseInt(str[2], 10).toString(16).toLowerCase();
   str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
   str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
   str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
   return ('#' + str.join(""));
}

function change_inner_body(color)
{
alert(color)
//this displays #ffffff
document.getElementById('inner_body').style.backgroundColor=color;
alert([!]rgbConvert([/!]document.getElementById('inner_body').style.backgroundColor[!])[/!]);
//this displays [s]rgb(255, 255, 255)[/s] #ffffff
}

will the above script work to make a color a few shades darker?

for example, set the background as a light gray, then automatically set the font color a darker shade of gray, but still the same hue so they match

Nothing about my code will change any values, it just converts the rgb string passed to it to a hex string.


Is that not what you wanted?

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[unomateo]

Let me try your script again, with the way you have it in the alert...

 

[unomateo]

I've determined this is a problem with Firefox and not IE

I have a full webpage, that I use javascript to edit the colors. Then I get all the code and firefox will convert all the hex values in style tags to rgb values

I send the color as #ffffff

function change_border(color)
{
document.getElementById('inner_body').style.border="1px solid "+color
alert(document.getElementById('inner_body').style.border);
//in firefox =  1px solid rgb(255, 255, 255)
//in ie = 1px solid #ffffff; 
}

is there a work around for this.
I've tried different ways, I have even tried

function change_border(color)
{
document.getElementById('inner_body').innerHTML="<tag></tag>"

}

same thing

 

[kaht]

is there a work around for this

Umm.... it should be pretty obvious. Check the string to see what is returned. If it's in the rgb format, then use the function I supplied to convert it to hex. If the string is already in hex format, then you don't have to do anything.

Is this for a homework assignment? The way the questions are stringing along is making it seem so.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[unomateo]

no, it's not homework.

I can understand running it thru your function, but I will have to do a regex search to find all the rgb's...

The work flow is like this:

I have a table that I change the color to with javacript. The table is surrounded with a div tag. after I change the color, I get the innerHTML so I can copy and paste the table code to a classified ad website like craigslist.

<div id='all'>
<table id='main_table' style='background-color:#ffffff'>
....
</table>
</div>

function change_table(color)
{

document.getElementById('main_table').style.backgroundColor = color
//sets color to #ff6600
}

then I get the innerHTML

function get_html()
{
var thecode = document.getElementById('all').innerHTML
alert(thecode)
//the results will list the table background color in RGB
}

This only happens in Mozilla firefox...IE will return the table style background color as HEX

 

[kaht]

Ok... now we're finally getting to the bottom of everything. Had your last post been your first we could have resolved this yesterday.

I can understand running it thru your function, but I will have to do a regex search to find all the rgb's...

You are exactly right. Well... not exactly. You could use some combination of indexOf and substr/substring to achieve the same w/o using a regex - but regex would definitely be more elegant.

Make sure that if you use a regex to replace all rgb values that you add the global identifier to the end. If you have problems writing the regex post what you've worked on up to that point and I'll help you modify it.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]