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 59  6865  pa***********@libero.it 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>
<head>
<script type="text/JavaScript">
function bla(){
var b = document.getElementsByTagName('body')[0];
var bg = b.style.backgroundColor;
alert('present background is '+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]+')';
alert('new background is '+b.style.backgroundColor)
}
onload=bla
</script>
</head>
<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: http://www.google.com/search?q=conve...rgb+javascript
--
Bart
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.
(Please change the x'es to dots in my emailaddress)
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 pa***********@libero.it 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
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.
Inverting all seperate hexadecimal characters
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.
(Please change the x'es to dots in my emailaddress)
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>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<div style="position: absolute; width: 100px; height: 100px; z-index:
1; background= #aaccdd" id="layer1">
</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
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>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<div style="position: absolute; width: 100px; height: 100px; z-index:
1; background= #aaccdd" id="layer1">
</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 <headsection.
>
<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?
No. Please read up on CSS, this are CSS basics.
CSS "background" is the shortcut for different background properties.
Only use those shortcuts, when you understand CSS completely.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
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 <headsection.
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...
No. Please read up on CSS, this are CSS basics.
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
Hmmm. Try:
<SCRIPT TYPE="text/javascript">
function showMe(x){
alert('backgroundColor = '+ x.style.backgroundColor);
}
</SCRIPT>
<div style='background-color:#c0c0c0;width:150px;'
onclick='showMe(this)'>
Click me to show my background color
</div>
MSIE shows "#c0c0c0"
FF shows "rgb(192,192,192)"
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 <headsection 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.
(Please change the x'es to dots in my emailaddress)
Jim Land wrote on 09 sep 2006 in comp.lang.javascript :
Hmmm. Try:
<SCRIPT TYPE="text/javascript">
function showMe(x){
alert('backgroundColor = '+ x.style.backgroundColor);
}
</SCRIPT>
<div style='background-color:#c0c0c0;width:150px;'
onclick='showMe(this)'>
Click me to show my background color
</div>
MSIE shows "#c0c0c0"
FF shows "rgb(192,192,192)"
Damn!
Couldn't we persuade the powers-that-be to provide access to the 3 basic
colours seperately?
like:
this.style.backgroundColor.red
this.style.backgroundColor.green
this.style.backgroundColor.blue
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
MSIE shows "#c0c0c0"
FF shows "rgb(192,192,192)"
Damn!
Right.
I just tried it: with Firefox your nice function seems to quit working.
:(
After all if Firefox converts always to rgb() one could argue that this
could make more "omogeneous" the programming. The problem is that
usually we want these things to work with all major browsers...
So is the best approach to convert all to rgb() or should we test each
time if is an hex representation or a rgb ?
-P
wrote on 09 sep 2006 in comp.lang.javascript :
>
>
MSIE shows "#c0c0c0"
FF shows "rgb(192,192,192)"
Damn!
Right.
I just tried it: with Firefox your nice function seems to quit working.
:(
After all if Firefox converts always to rgb() one could argue that this
could make more "omogeneous" the programming. The problem is that
usually we want these things to work with all major browsers...
So is the best approach to convert all to rgb() or should we test each
time if is an hex representation or a rgb ?
I hate "best" approaches.
<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c = x.style.backgroundColor
// begin FF patch
if (/rgb/.test(c)) {
c = c.replace(/rgb\(|\)/g,'').split(',')
c = '#'+thex(c[0])+thex(c[1])+thex(c[2])
}
// end FF patch
x.style.backgroundColor =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}
function thex(x) {
x = +x
return (x>15)?x.toString(16):('0'+x.toString(16))
}
</script>
<div style='background-color:#c0c0c0;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Evertjan. wrote:
Jim Land wrote on 09 sep 2006 in comp.lang.javascript:
<snip>
>MSIE shows "#c0c0c0"
FF shows "rgb(192,192,192)"
Damn!
Couldn't we persuade the powers-that-be to provide access
to the 3 basic colours seperately?
like:
this.style.backgroundColor.red
this.style.backgroundColor.green
this.style.backgroundColor.blue
The "powers-that-be" have defined a - RGBColor - interface which can be
used to extract separate RGB colors form - style - objects. Eventually
we may get to the point where browsers consistently implement that
facility.
Richard.
Wow!
I am so fashinated how one can do some complex task
in just a couple of lines of code in javascript !
If I had to do it, I would probably used both functions (Bart's and
yours)
after checking the first char. Which, if works, is probably less
elegant ...
It will probably take me some days to understand exactly
what's going on there :)
Fantastic!
-P
Evertjan. ha scritto:
wrote on 09 sep 2006 in comp.lang.javascript:
MSIE shows "#c0c0c0"
FF shows "rgb(192,192,192)"
Damn!
Right.
I just tried it: with Firefox your nice function seems to quit working.
:(
After all if Firefox converts always to rgb() one could argue that this
could make more "omogeneous" the programming. The problem is that
usually we want these things to work with all major browsers...
So is the best approach to convert all to rgb() or should we test each
time if is an hex representation or a rgb ?
I hate "best" approaches.
<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c = x.style.backgroundColor
// begin FF patch
if (/rgb/.test(c)) {
c = c.replace(/rgb\(|\)/g,'').split(',')
c = '#'+thex(c[0])+thex(c[1])+thex(c[2])
}
// end FF patch
x.style.backgroundColor =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}
function thex(x) {
x = +x
return (x>15)?x.toString(16):('0'+x.toString(16))
}
</script>
<div style='background-color:#c0c0c0;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
btw
what is the purpose of that statement:
x = +x
is that some kind of conversion or what?
-P pa***********@libero.it ha scritto:
Wow!
I am so fashinated how one can do some complex task
in just a couple of lines of code in javascript !
If I had to do it, I would probably used both functions (Bart's and
yours)
after checking the first char. Which, if works, is probably less
elegant ...
It will probably take me some days to understand exactly
what's going on there :)
Fantastic!
-P
Evertjan. ha scritto:
wrote on 09 sep 2006 in comp.lang.javascript:
>
>
MSIE shows "#c0c0c0"
>
FF shows "rgb(192,192,192)"
>>
>Damn!
>
Right.
I just tried it: with Firefox your nice function seems to quit working.
:(
>
After all if Firefox converts always to rgb() one could argue that this
could make more "omogeneous" the programming. The problem is that
usually we want these things to work with all major browsers...
>
So is the best approach to convert all to rgb() or should we test each
time if is an hex representation or a rgb ?
I hate "best" approaches.
<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c = x.style.backgroundColor
// begin FF patch
if (/rgb/.test(c)) {
c = c.replace(/rgb\(|\)/g,'').split(',')
c = '#'+thex(c[0])+thex(c[1])+thex(c[2])
}
// end FF patch
x.style.backgroundColor =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}
function thex(x) {
x = +x
return (x>15)?x.toString(16):('0'+x.toString(16))
}
</script>
<div style='background-color:#c0c0c0;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Evertjan. написав:
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c = x.style.backgroundColor
// begin FF patch
if (/rgb/.test(c)) {
c = c.replace(/rgb\(|\)/g,'').split(',')
c = '#'+thex(c[0])+thex(c[1])+thex(c[2])
}
// end FF patch
x.style.backgroundColor =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}
function thex(x) {
x = +x
return (x>15)?x.toString(16):('0'+x.toString(16))
}
</script>
<div style='background-color:#c0c0c0;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
I believe that inverting color must be simpler.
Just an idea:
var hexColor="FFAA55"
var invertedColor=0xFFFFFF-parseInt(hexColor,16)
//now we just have to set leading zeroes if needed
In RGB color+invertedColor=white, isn't it?
Then invertedColor=white-color
scriptg...@gmail.com написав:
Evertjan. написав:
function invertMe(x){
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c = x.style.backgroundColor
// begin FF patch
if (/rgb/.test(c)) {
c = c.replace(/rgb\(|\)/g,'').split(',')
c = '#'+thex(c[0])+thex(c[1])+thex(c[2])
}
// end FF patch
x.style.backgroundColor =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
}
function thex(x) {
x = +x
return (x>15)?x.toString(16):('0'+x.toString(16))
}
</script>
<div style='background-color:#c0c0c0;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
<br><br>
<div style='background-color:#fe3456;width:250px;'
onclick='invertMe(this)'>
Click me to invert my background</div>
I believe that inverting color must be simpler.
Just an idea:
var hexColor="FFAA55"
var invertedColor=0xFFFFFF-parseInt(hexColor,16)
//now we just have to set leading zeroes if needed
In RGB color+invertedColor=white, isn't it?
Then invertedColor=white-color
//I forgot: we need to convert it to hex string
var invertedColor=(0xFFFFFF-parseInt(hexColor,16)).toString(16)
//now we just have to add leading zeroes if needed
wrote on 09 sep 2006 in comp.lang.javascript :
what is the purpose of that statement:
x = +x
is that some kind of conversion or what?
[please do not toppost on usenet]
Conversion of string to number.
The + here is an unary +.
These values come as a string
and comparing strings would give unexpected results.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
wrote on 09 sep 2006 in comp.lang.javascript :
>I believe that inverting color must be simpler.
Just an idea:
var hexColor="FFAA55"
var invertedColor=0xFFFFFF-parseInt(hexColor,16)
//now we just have to set leading zeroes if needed
In RGB color+invertedColor=white, isn't it?
Then invertedColor=white-color
//I forgot: we need to convert it to hex string
var invertedColor=(0xFFFFFF-parseInt(hexColor,16)).toString(16)
//now we just have to add leading zeroes if needed
You forget the skipping of the #, and later the adding again,
and the adding of leading zero's,
[ff0000 would return ffff in your example, not 00ffff],
which makes it just as difficult, IMHO.
There is always the choice of string manipulation and number crunching.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress) pa***********@libero.it a crit :
Wow!
I am so fashinated how one can do some complex task
in just a couple of lines of code in javascript !
Overall that do not resolve the problem with all browsers (FireFox and
IE aren't alone)
On my sens the best an easiest way is to use classes
<style type="text/css">
..colorYellow { color: #ffc }
..colorGold { color: coral }
..backBlack { background: rgb(111, 111, 111); }
..backWhite { background: whitesmoke }
</style>
<h1 id="here" class="colorGold backWhite">Yellow on dirty white</h1>
<a href="#"
onclick="var h = document.getElementById('here');
h.className = h.className=='colorGold backWhite'?
'colorYellow backBlack' :
'colorGold backWhite';
return false;">change title colors</a>
And to browsers to mix their one soup ... !
--
Stephane Moriaux et son [moins] vieux Mac
Hi Stephane
ASM ha scritto:
Overall that do not resolve the problem with all browsers (FireFox and
IE aren't alone)
Why not Stephane? Are there other color representation other than
#aabbcc and
rgb(xxx,yyy,zzz) ?? Can you make an example of what you mean?
>
On my sens the best an easiest way is to use classes
<style type="text/css">
.colorYellow { color: #ffc }
.colorGold { color: coral }
.backBlack { background: rgb(111, 111, 111); }
.backWhite { background: whitesmoke }
</style>
<h1 id="here" class="colorGold backWhite">Yellow on dirty white</h1>
<a href="#"
onclick="var h = document.getElementById('here');
h.className = h.className=='colorGold backWhite'?
'colorYellow backBlack' :
'colorGold backWhite';
return false;">change title colors</a>
And to browsers to mix their one soup ... !
Hmmm. We are not assuming the original color be know.
Are you making that assumption?
-P
JRS: In article <11**********************@i42g2000cwa.googlegroups .com>
, dated Sat, 9 Sep 2006 02:41:12 remote, seen in
news:comp.lang.javascript, pa***********@libero.it posted :
>How can I invert that background color "anyColorHere" ? Can you point
(or suggest) a script
that does that in a proper way ?
You read the initial colour numerically; you invert the number; you
write the number back.
BUT : Think carefully about what inversion should mean.
Consider first just the pure red component, which will be a number in
the range 0x00 to 0xFF.
If you want to make light be dark, dark be light, and middling be
middling, then subtract the number from 0xFF.
If you want to change any colour to be a substantially different colour,
then XOR the number with 0x80.
In each case you might either treat the whole colour as being
represented by three separate components, and do three small
arithmetics; or you can treat it as one Hex number and use one large
arithmetic - XOR with 0x808080 or subtract from 0xFFFFFF.
--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk DOS 3.3, 6.20; Win98.
Web <URL:http://www.merlyn.demon.co.uk/- FAQqish topics, acronyms & links.
PAS EXE TXT ZIP via <URL:http://www.merlyn.demon.co.uk/programs/00index.htm>
My DOS <URL:http://www.merlyn.demon.co.uk/batfiles.htm- also batprogs.htm.
Evertjan. написав:
wrote on 09 sep 2006 in comp.lang.javascript:
I believe that inverting color must be simpler.
Just an idea:
var hexColor="FFAA55"
var invertedColor=0xFFFFFF-parseInt(hexColor,16)
//now we just have to set leading zeroes if needed
In RGB color+invertedColor=white, isn't it?
Then invertedColor=white-color
//I forgot: we need to convert it to hex string
var invertedColor=(0xFFFFFF-parseInt(hexColor,16)).toString(16)
//now we just have to add leading zeroes if needed
You forget the skipping of the #, and later the adding again,
and the adding of leading zero's,
[ff0000 would return ffff in your example, not 00ffff],
which makes it just as difficult, IMHO.
ok, let me try just for fun :o)
var hexColor="#af5601"
var
invertedHexColor=(0xFFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
invertedHexColor="#"+"00000".substr(invertedHexCol or.length-1)+invertedHexColor
It really looks longer than before, but might be faster and still
shorter than your method.
(I don't telling that your method is wrong or bad!)
Dr John Stockton написав:
In each case you might either treat the whole colour as being
represented by three separate components, and do three small
arithmetics; or you can treat it as one Hex number and use one large
arithmetic - XOR with 0x808080 or subtract from 0xFFFFFF.
I think that representing color as a one big number is better because
it require less computations: just XOR it once or substract. XORing is
a good way too, I thought about substraction just because of a phisical
nature of color models.
Val Polyakh (sc********@gmail.com)
It really looks longer than before, but might be faster and still
shorter than your method.
(I don't telling that your method is wrong or bad!)
Hi scriptguru,
at this point why do you not complete it all, so that we can make a
comparison ;)
If the script is not functionally equivalent is too soon to say if it
is shorter or faster...
To be functionally equivalent you need to take care of both formats,
hex (with case insensitive) and rgb.
-P pa***********@libero.it wrote:
Hi Stephane
ASM ha scritto:
>Overall that do not resolve the problem with all
browsers (FireFox and IE aren't alone)
Why not Stephane? Are there other color representation
other than #aabbcc and
rgb(xxx,yyy,zzz) ??
<snip>
There are. There is a set of color keywords such as 'red', 'white',
'black', etc. And RGB values may be expressed in percentages in addition
to 0-255 numbers.
Richard. pa***********@libero.it написав:
It really looks longer than before, but might be faster and still
shorter than your method.
(I don't telling that your method is wrong or bad!)
Hi scriptguru,
at this point why do you not complete it all, so that we can make a
comparison ;)
If the script is not functionally equivalent is too soon to say if it
is shorter or faster...
To be functionally equivalent you need to take care of both formats,
hex (with case insensitive) and rgb.
-P
Hi Pamela,
I will not complete it because you already have all parts required to
make it yourself ;)
My approach is already case insensitive, but sure it can't handle
rgb(...) format :(
My post was just an *idea* how to make it smaller, not a full final
solution. Sorry if it is not enough.
Val Polyakh pa***********@libero.it a crit :
Hi Stephane
Ciao Pamela,
ASM ha scritto:
>Overall that do not resolve the problem with all browsers (FireFox and
IE aren't alone)
Why not Stephane? Are there other color representation other than
#aabbcc and
rgb(xxx,yyy,zzz) ?? Can you make an example of what you mean?
From memory, I think I've found some browser reading #fff
and sending back #FFFFFF, other the rgb() by numbers, other the rgb() by
percents, other something I could'nt understand.
Personally I use to use colors by names, and never the rvb() mode.
It is enough difficult to choice a color by #xyz or #abcdef without to
loose ourself in rgb.
>On my sens the best an easiest way is to use classes
[...]
>And to browsers to mix their one soup ... !
Hmmm. We are not assuming the original color be know.
Are you making that assumption?
I said easiest way to change (known) colors.
Would you decide your colors eyes closed ?
I answered before reading the complete thread, and think some ones tried
to give you coloring inverter.
Probably would you need this kind of engine to help your web factory to
work better ?
--
Stephane Moriaux et son [moins] vieux Mac sc********@gmail.com ha scritto:
My approach is already case insensitive, but sure it can't handle
rgb(...) format :(
Hi Val,
actually I have the impression it's just the same thing, if not easier.
For each component you do: 255-R,255-G,255-B, or !R, !G, !B (with "!"
I mean "not"), as you suggested. Perhaps is even simpler than hex,
where the string could be truncated and that could be troublesome...
-P
Val Polyakh
wrote on 10 sep 2006 in comp.lang.javascript :
>
Dr John Stockton написав:
>In each case you might either treat the whole colour as being
represented by three separate components, and do three small
arithmetics; or you can treat it as one Hex number and use one large
arithmetic - XOR with 0x808080 or subtract from 0xFFFFFF.
I think that representing color as a one big number is better because
it require less computations: just XOR it once or substract. XORing is
a good way too, I thought about substraction just because of a phisical
nature of color models.
I cannot find an internal exor function in javascript.
That's why I made mine with regex.
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
)
or better?:
var t1 = '0123456789abcdef#fedcba9876543210#'
var c =
c.replace( /./gi,
function (s) {
return t1.charAt(t1.indexOf(s)+17);
}
)
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Evertjan. ha scritto:
var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
Hi Evertjan,
Just waken up :) I have one doubt. Let's consider the case of color
that have been specified with an incomplete Hex string. For instance
"#aa00" or "#55" or "#2".
I think I have read somewhere, but I am not sure to remember well, that
browsers do something strange when filling up these incomplete strings.
Like filling them to the right (or left?) with "f" (do not remember
well, but probably you know that well).
I was just wondering if this fact could screw your algorithm where each
digit is transformed to its complementar. I am wondering if in case of
an incomplete string the number you obtain is actually the hex
complement of the original .. (??)
-P
Evertjan. ha scritto:
I cannot find an internal exor function in javascript.
I do not know if I am mixing up with other languages, but I think to
remember I have read somewhere that there is an ^ operator to xor
integers ...
-P pa***********@libero.it написав:
Evertjan. ha scritto:
I cannot find an internal exor function in javascript.
I do not know if I am mixing up with other languages, but I think to
remember I have read somewhere that there is an ^ operator to xor
integers ...
-P
Hi Pam,
it is true: ^ is a XOR.
About colors: there is only color formats in CSS as follows:
#RRGGBB
#RGB
rgb(RRR,GGG,BBB)
rgb(RR%,GG%,BB%)
+named colors.
Do you really want to manage with *all* these formats? sc********@gmail.com ha scritto:
About colors: there is only color formats in CSS as follows:
#RRGGBB
#RGB <--- what is this?
rgb(RRR,GGG,BBB)
rgb(RR%,GG%,BB%)
+named colors.
Do you really want to manage with *all* these formats?
:)) No just hex strings. The necessity to deal with rgb() also
came from the observation (jim) that Firefox does an automatic
conversion
to rgb().
It's unbeliavable how so much complexity stems from the fact that
there isn't a uniform way to extract the color components, as has been
suggested in this thread. (Why do they not ask programmers first?)
Sometimes a non foreseeing model making can become hell for the poor
programmers. I am currently facing a similar issue with CSS vertical
align of text. The css designers seems to have really screwed this up
and in still in the 2006 we are struggling to vertically align
middle/bottom
some simple multiline text within a DIV !!
Altro che 2001 Odissea nello spazio!!
-P
JRS: In article <11**********************@h48g2000cwc.googlegroups .com>,
dated Sat, 9 Sep 2006 16:03:26 remote, seen in
news:comp.lang.javascript, sc********@gmail.com posted :
>
var hexColor="#af5601"
var
invertedHexColor=(0xFFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
invertedHexColor="#"+"00000".substr(invertedHexCo lor.length-1)+invertedHexColor
If you subtract from 0x1FFFFFF then toString(16) will give 1xxxxxx and
a RegExp replace can easily change that to #xxxxxx. Untested.
--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links. pa***********@libero.it написав:
sc********@gmail.com ha scritto:
About colors: there is only color formats in CSS as follows:
#RRGGBB
#RGB <--- what is this?
rgb(RRR,GGG,BBB)
rgb(RR%,GG%,BB%)
+named colors.
#F5A = #FF55AA
It's unbeliavable how so much complexity stems from the fact that
there isn't a uniform way to extract the color components, as has been
suggested in this thread. (Why do they not ask programmers first?)
It is true. But in this case we just need to convert rgb() into #hex,
and then process only hex.
Sometimes a non foreseeing model making can become hell for the poor
programmers. I am currently facing a similar issue with CSS vertical
align of text. The css designers seems to have really screwed this up
and in still in the 2006 we are struggling to vertically align
middle/bottom
some simple multiline text within a DIV !!
Oh, I even don't want to think about vertical align :(
I hope it will be well supported soon.
Altro che 2001 Odissea nello spazio!!
Translate, please ;)
Val
Dr John Stockton написав:
JRS: In article <11**********************@h48g2000cwc.googlegroups .com>,
dated Sat, 9 Sep 2006 16:03:26 remote, seen in
news:comp.lang.javascript, sc********@gmail.com posted :
var hexColor="#af5601"
var
invertedHexColor=(0xFFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
invertedHexColor="#"+"00000".substr(invertedHexCol or.length-1)+invertedHexColor
If you subtract from 0x1FFFFFF then toString(16) will give 1xxxxxx and
a RegExp replace can easily change that to #xxxxxx. Untested.
Great idea!
We even can manage with it without regexps:
var hexColor="#af5601"
var invertedHexColor =
(0x1FFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
invertedHexColor="#"+invertedHexColor.substr(1)
Val
Bart Van der Donck a crit :
>
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.
and where has gone your previous post ?
--
Stephane Moriaux et son [moins] vieux Mac
wrote on 10 sep 2006 in comp.lang.javascript :
>
Evertjan. ha scritto:
> var t1 = '0123456789abcdef#'
var t2 = 'fedcba9876543210#'
var c =
c.replace( /./gi,
function (s) {
return t2.charAt(t1.indexOf(s));
}
Hi Evertjan,
Just waken up :) I have one doubt. Let's consider the case of color
that have been specified with an incomplete Hex string. For instance
"#aa00" or "#55" or "#2".
We were talking about ...style.backgroundColor, which shoeld always be
6 places in IE.
Even so in my example any number will be inverted.
I think I have read somewhere, but I am not sure to remember well, that
browsers do something strange when filling up these incomplete strings.
Like filling them to the right (or left?) with "f" (do not remember
well, but probably you know that well).
I don't think so. Only #abc will become #aabbcc, which does not do harm.
I was just wondering if this fact could screw your algorithm where each
digit is transformed to its complementar.
No, inversion is inversion.
I am wondering if in case of
an incomplete string the number you obtain is actually the hex
complement of the original .. (??)
Please be my guest and test.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress) pa***********@libero.it wrote:
sc********@gmail.com ha scritto:
>About colors: there is only color formats in CSS
as follows:
#RRGGBB
#RGB <--- what is this?
rgb(RRR,GGG,BBB)
rgb(RR%,GG%,BB%)
+named colors.
Do you really want to manage with *all* these formats?
:)) No just hex strings. The necessity to deal with rgb()
also came from the observation (jim) that Firefox does an
automatic conversion to rgb().
<snip>
The observation that one browser 'normalises' CSS color values into a
standard CSS color format does not mean that it is necessary to handle
two formats, it means that it can be expected that any browser could
'normalise' any CSS color value into any CSS color format, or not, at
the whim of the browser's programmers. You cannot assume any single
format when you read the properties of the style object, and the only
set of formats that can be assumed is the entire CSS set. (with known
extensions such as IE's liberal set of additional color names).
Richard. pa***********@libero.it a crit :
sc********@gmail.com ha scritto:
>About colors: there is only color formats in CSS as follows:
#RRGGBB
#RGB <--- what is this?
rgb(RRR,GGG,BBB)
rgb(RR%,GG%,BB%)
+named colors.
Do you really want to manage with *all* these formats?
:)) No just hex strings. The necessity to deal with rgb() also
came from the observation (jim) that Firefox does an automatic
conversion
to rgb().
But I didn't really understand what is inverse
(when speaking about colors)
I made a demo page with what I could see here :
<http://stephane.moriaux.perso.orange.fr/truc/convertisseur_couleurs>
--
Stephane Moriaux et son [moins] vieux Mac
>
Altro che 2001 Odissea nello spazio!!
Translate, please ;)
Quite OT
At the time KUBRICK made 2001: A SPACE ODYSSEY the year 2000 seemed to
be far away and we imagined that the world should be completely
different. Traveling in space-time, cars flying and so on, ... and now,
in the 2006, we find ourself sitting on a chair, fighting with CSS to
be able to vertically align a couple of text lines ... that's kind of
ridiculous ... http://en.wikipedia.org/wiki/2001:_A...sey_%28film%29
-P
ASM написав:
pa***********@libero.it a écrit :
sc********@gmail.com ha scritto:
About colors: there is only color formats in CSS as follows:
#RRGGBB
#RGB <--- what is this?
rgb(RRR,GGG,BBB)
rgb(RR%,GG%,BB%)
+named colors.
Do you really want to manage with *all* these formats?
:)) No just hex strings. The necessity to deal with rgb() also
came from the observation (jim) that Firefox does an automatic
conversion
to rgb().
But I didn't really understand what is inverse
(when speaking about colors)
If we have color1 and inverse it then would have color2 which is
complementary to color1. Complementary means that color1+color2=white
(in RGB) and color1+color2=black (in CMYK).
I made a demo page with what I could see here :
<http://stephane.moriaux.perso.orange.fr/truc/convertisseur_couleurs>
It works fine and seems to be handy!
Val Polyakh
You can shorten it by using
var x =
(0x1FFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
return ("#"+x.substr(1)).toUpperCase()
instead of
var x = (0xFFFFFF-parseInt(hexColor.substr(1),16)).toString(16);
x = x.length<4? '0000'+x : x.length<6? '00'+x : x;
return '#'+x.toUpperCase();
<http://stephane.moriaux.perso.orange.fr/truc/convertisseur_couleurs>
It works fine and seems to be handy!
To me (IE on xp) it gives error when I load the page: row 28: Object
necessary.
Similar error on row 27 if click on the button.
BTW
When I reference a JS script in my <headand the script is not there,
how can I have the load to proceed without the error message. Is there
a way to avoid it ? e.g. load without complaint, just ignore it?
-P pa***********@libero.it a crit :
>><http://stephane.moriaux.perso.orange.fr/truc/convertisseur_couleurs>
It works fine and seems to be handy!
To me (IE on xp) it gives error when I load the page: row 28: Object
necessary.
Similar error on row 27 if click on the button.
No error with my IE 5.2 Mac ...
There is no table in this page !
But, by 'row', perhaps IE wants to mean 'line' ?
line 27 :
$('c1').style.background = $('col1').value;
where $() is a shortcut for doc.gEBI()
line 28 :
something similar but longer
Would have IE Win xp to need backgroundColor ?
One time IE accepts in css rules .foo { color= blue }
or is glad with a name when we call an id
One time it could not accept a color if we do in JS :
foo.background = '#ff0'
? ?
I've fixed it
Is it OK now ?
When I reference a JS script in my <headand the script is not there,
how can I have the load to proceed without the error message. Is there
a way to avoid it ? e.g. load without complaint, just ignore it?
it is in browser's preferences
onglet : Contenu Web (web containt ?)
[ ] Activer les scripts (active scripts)
[ ] Activer les erreurs de scripts (active errors)
But ... errors can't be ignored
an error would have to stop all the JS (IE, FF, and others)
--
Stephane Moriaux et son [moins] vieux Mac
wrote on 12 sep 2006 in comp.lang.javascript :
You can shorten it by using
var x =
(0x1FFFFFF-parseInt(hexColor.substr(1),16)).toString(16)
return ("#"+x.substr(1)).toUpperCase()
Why .toUpperCase() ?
CSS seems quite happy with lowercase.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress) sc********@gmail.com a écrit :
ASM написав:
ni poo ni my : написав
:-)
>But I didn't really understand what is inverse
(when speaking about colors)
If we have color1 and inverse it then would have color2 which is
complementary to color1. Complementary means that color1+color2=white
(in RGB) and color1+color2=black (in CMYK).
And that is in accordance with chroma wheel ?
It doesn't seem : #f00 (red) in inverse = #0ff (not green)
Gasp !
I used your code based on hex colors !
(0xFFFFFF-parseInt(hexColor.substr(1),16)).toString(16);
perhaps is it why I don't get complementary colors ?
>demo page :
<http://stephane.moriaux.perso.orange.fr/truc/convertisseur_couleurs>
--
Stephane Moriaux et son [moins] vieux Mac This thread has been closed and replies have been disabled. Please start a new discussion. |
