Velocity Reviews > Color computation

# Color computation

pamelafluente@libero.it
Guest
Posts: n/a

 09-09-2006
Hi,

If I have:

<div style="background:anyColorHere"> Hi </div>

where anyColorHere is any hex string that represent a valid color.

How can I invert that background color "anyColorHere" ? Can you point
(or suggest) a script
that does that in a proper way ?

-P

Bart Van der Donck
Guest
Posts: n/a

 09-09-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:

> <div style="background:anyColorHere"> Hi </div>
> where anyColorHere is any hex string that represent a valid color.
> How can I invert that background color "anyColorHere" ? Can you point
> (or suggest) a script that does that in a proper way ?

<html>
<script type="text/JavaScript">
function bla(){
var b = document.getElementsByTagName('body')[0];
var bg = b.style.backgroundColor;
alert('present background will be change into inversed RGB color')
var oldCol = bg.split('(')[1].split(')')[0].split(',');
var newCol = new Array()
for(var i=0;i<oldCol.length;i++){
newCol[i] = 255-Number(oldCol[i]);
}
b.style.backgroundColor
= 'rgb('+newCol[0]+','+newCol[1]+','+newCol[2]+')';
}
</script>
<body style="background-color: rgb(0,204,255)">
</body>
</html>

Soli Deo Gloria:
http://www.codingforums.com/archive/...p?t-47335.html

Hex/RGB converter:

--
Bart

Evertjan.
Guest
Posts: n/a

 09-09-2006
wrote on 09 sep 2006 in comp.lang.javascript:
> If I have:
>
> <div style="background:anyColorHere"> Hi </div>
>
> where anyColorHere is any hex string that represent a valid color.
>
> How can I invert that background color "anyColorHere" ? Can you point
> (or suggest) a script that does that in a proper way ?

try:

<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
x.style.backgroundColor =
x.style.backgroundColor.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}
</script>

<div style='background-color:#c0c0c0;width:50px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:50px;'
onclick='invertMe(this)'>
Click me to invert my background</div>

--
Evertjan.
The Netherlands.

pamelafluente@libero.it
Guest
Posts: n/a

 09-09-2006
> x.style.backgroundColor.replace( /./gi,
> function (s) {
> return t2.charAt(t1.indexOf(s));

....

I replay here to you both, Bart and Evertjan.

Both solution works fine.

Bart is relying, as far as I understand, on the fact that
color is defined as rgb(xx,yy,zz)". Actually I assumed in my
question an hex string. But it is nice indeed to have this method also.

The script proposed by Evertjan is a precide reply to my question
and I feel the logic it implements is quite smart. It has also
the advantage to shield from then many complexities of a possible
parsing.
I like it a lot.

btw What is this : <div style='background-color:#c0c0c0;width:50px;'
onclick='invertMe(this)'> Click me to invert my background</div>

in IE it does displays nothing. Is this code to test some other
browser?

-P

Bart Van der Donck
Guest
Posts: n/a

 09-09-2006
(E-Mail Removed) wrote:

> [...]
> Bart is relying, as far as I understand, on the fact that
> color is defined as rgb(xx,yy,zz)". Actually I assumed in my
> question an hex string.
> [...]

Yes, you'ld need to convert from hex to rgb (and back if necessary).
That shouldn't be too tough; see hyperlink at the end of my previous
post.

--
Bart

Evertjan.
Guest
Posts: n/a

 09-09-2006
wrote on 09 sep 2006 in comp.lang.javascript:

>> x.style.backgroundColor.replace( /./gi,
>> function (s) {
>> return t2.charAt(t1.indexOf(s));

> ...
>
> I replay here to you both, Bart and Evertjan.
>
> Both solution works fine.
>
> Bart is relying, as far as I understand, on the fact that
> color is defined as rgb(xx,yy,zz)". Actually I assumed in my
> question an hex string. But it is nice indeed to have this method also.
>
> The script proposed by Evertjan is a precide reply to my question
> and I feel the logic it implements is quite smart. It has also
> the advantage to shield from then many complexities of a possible
> parsing.
> I like it a lot.

will give a inversion of the total number,
while the # is replaced by itself.

Regular expression is IMHO preferrable to JS looping.

> btw What is this : <div style='background-color:#c0c0c0;width:50px;'
> onclick='invertMe(this)'> Click me to invert my background</div>

It seems you have to learn HTML and CSS before you try Javascript.
invertMe() is the function
in the <script type='text/javascript'>...</script>

Did you run my code in a test.html ?

> in IE it does displays nothing.

Oh, but it does.
Did you put my code in a seperate test.html as I expect you to do?
Or did you put other lines in it? Don't.

> Is this code to test some other
> browser?

No, IE works fine.

--
Evertjan.
The Netherlands.

pamelafluente@libero.it
Guest
Posts: n/a

 09-09-2006
> It seems you have to learn HTML and CSS before you try Javascript.
> invertMe() is the function
> in the <script type='text/javascript'>...</script>
>
> Did you run my code in a test.html ?
>
> > in IE it does displays nothing.

>
> Oh, but it does.
> Did you put my code in a seperate test.html as I expect you to do?
> Or did you put other lines in it? Don't.
>
> > Is this code to test some other
> > browser?

>
> No, IE works fine.
>

) Hi Evertjan ,

I tried pasting it in my code:

<html>

<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>

<body>

<div style="position: absolute; width: 100px; height: 100px; z-index:
1; background= #aaccdd" id="layer1">
&nbsp;</div>

<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
x.style.backgroundColor =
x.style.backgroundColor.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}

</script>

<div style='background-color:#c0c0c0;width:50px;'
onclick='invertMe(this)'>
1. Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:50px;'
onclick='invertMe(this)'>
2. Click me to invert my background</div>

</body>

</html>

I had the impression there was a block missing (perhaps was somehow
covered).

Is "background" the same as "background-color" I see you use the
latter. I always used the first. Is this a mistake?

-P

Evertjan.
Guest
Posts: n/a

 09-09-2006
wrote on 09 sep 2006 in comp.lang.javascript:

>> It seems you have to learn HTML and CSS before you try Javascript.
>> invertMe() is the function
>> in the <script type='text/javascript'>...</script>
>>
>> Did you run my code in a test.html ?
>>
>> > in IE it does displays nothing.

>>
>> Oh, but it does.
>> Did you put my code in a seperate test.html as I expect you to do?
>> Or did you put other lines in it? Don't.
>>
>> > Is this code to test some other
>> > browser?

>>
>> No, IE works fine.
>>

>
> ) Hi Evertjan ,
>
> I tried pasting it in my code:

You should not, until you tested my code for yourself AS IS.
Only if you agree it "works", proceed.
Talking about my code "not working" in your application will not be
usefull before that.

> <html>
>
> <meta http-equiv="Content-Type" content="text/html;
> charset=windows-1252">
> <title>New Page 1</title>
>
> <body>
>
> <div style="position: absolute; width: 100px; height: 100px; z-index:
> 1; background= #aaccdd" id="layer1">
> &nbsp;</div>

Why this? perhaps it covers the following, I did not test that.
Leave the above div away!

>
> <script type='text/javascript'>
> function invertMe(x){
> var t1 = '0123456789abcdef#'
> var t2 = 'fedcba9876543210#'
> x.style.backgroundColor =
> x.style.backgroundColor.replace( /./gi,
> function (s) {
> return t2.charAt(t1.indexOf(s));
> }
> )
>}
>
> </script>

Scripts like thease should be in the <head> section.

>
> <div style='background-color:#c0c0c0;width:50px;'
> onclick='invertMe(this)'>
> 1. Click me to invert my background</div>
> <br><br>
> <div style='background-color:#fe3456;width:50px;'
> onclick='invertMe(this)'>
> 2. Click me to invert my background</div>
>
>
> </body>
>
> </html>
>
>
> I had the impression there was a block missing (perhaps was somehow
> covered).

sorry?

>
> Is "background" the same as "background-color" I see you use the
> latter. I always used the first. Is this a mistake?

CSS "background" is the shortcut for different background properties.

Only use those shortcuts, when you understand CSS completely.

--
Evertjan.
The Netherlands.

pamelafluente@libero.it
Guest
Posts: n/a

 09-09-2006
> You should not, until you tested my code for yourself AS IS.
> Only if you agree it "works", proceed.

Ok

> Talking about my code "not working" in your application will not be
> usefull before that.

I am always sure the code you provide works. My first though is try
to find what I am doing in the wrong way.

> Why this? perhaps it covers the following, I did not test that.
> Leave the above div away!

Yes I tried without that. It works just fine.

> Scripts like thease should be in the <head> section.

Yes I noticed the scripts are sometimes in the head and sometimes in
the
body. But I am not sure what difference it makes. And if there is a
difference
would it also apply to referenced JS files like in
<script language="javascript" src="someFile.js"></script> ?

> > I had the impression there was a block missing (perhaps was somehow
> > covered).

>
> sorry?

Yes am talking about my code: The first block (mine) was covering your
first one. I did not expect that: I though your blocks would have just
follow my existing block. But assumed wrong...

>

with masters like you guys in this group every other source is just
useless.
I have visited several group and this one is the most "simpatico"
(dont' know the right translation) !!

Thanks,

-P

Evertjan.
Guest
Posts: n/a

 09-09-2006
wrote on 09 sep 2006 in comp.lang.javascript:

> Yes I noticed the scripts are sometimes in the head and sometimes in
> the body. But I am not sure what difference it makes.

For the current browsers, which are very forgiving, it is not necessary I
believe.

However part of coding sanity is to make code that is pleasing to the eye
and logical with indenting etc. Putting all javascriipt that does not
document.write() in the <head> section is at least one such convention.

The above simplifies debugging and is joyful per se.

> And if there is a difference
> would it also apply to referenced JS files like in
> <script language="javascript" src="someFile.js"></script> ?

That is the same, put that in the head too.

Do not use referenced js until you are confortable with the infile code.
it is far more bothersome to debug.

--
Evertjan.
The Netherlands.