Color Chooser Amendment?

M

Mickey

Hi,

I am having trouble with a javascript.
The purpose of this script is to enable a user to click a generated
color cell in a table and the color code ie: #ffffff is returned to the
caller... ie: printed in a textfield on the calling page/form.

Presently, in Firefox.. this script will print the shell of a table
(just the borders...) and in IE I get nothing.

I would aprechiate it if someone had the time to look over this short
script (below) and perhaps suggest to me, where I am going wrong?

------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>

<script type="text/javascript" language="JavaScript">
<!--
function setColor(sentcolor)
{
document.f.c.value=sentcolor;
opener.document.createStyle.bgLink.value = sentcolor;
}


function getColorTable()
{
// Color code table
c = new Array('00', '33', '66', '99', 'cc', 'ff');
// Start color table
t = '<table border="1" cellpadding="6"
style="border-collapse:collapse;">';
// Iterate red color
for (r = 0; r < 6; r++)
{
// Iterate green color
for (g = 0; g < 6; g++)
{
// Start color table row
t += '<tr>';
// Iterate blue color
for (b = 0; b < 6; b++)
{
// Get RGB (background) color code
L = '#' + c[r] + c[g] + c;
// Get alternative/tooltip text
A = L + ' = RGB('
+ parseInt('0x' + c[r]) + ', '
+ parseInt('0x' + c[g]) + ', '
+ parseInt('0x' + c) + ')'
;
// Get "inverted" RGB (foreground) color code
F = '#' + c[5 - r] + c[5 - g] + c[5 - b];
// Color table cell
t += '<td align="center"'
+ ' style="'
+ 'background-color:' + L + ';'
+ 'color:' + F + ';'
+ 'font-family:Courier New;'
+ 'cursor:hand;'
+ '"'
+ ' title="' + A + '"'
+ ' onclick="setColor(\'' + L + '\');"'
//+ ' onclick="add_smilie(\'' + L + '\');"'
//+ ' onmouseover="window.status=\'' + A + '\';"'
//+ ' onmouseout="window.status=\' \';"'
+ '></td>'
;
}
// End color table row
t += '</tr>';
}
}

return t;
}
//-->
</script>
</head>
<body bgcolor='#1E2C38'>
<form name="f"><input type="text" size="7" name="c" value=""></form>
<script type="text/javascript" language="JavaScript">
<!--
document.write(getColorTable() + '</table>');
//-->
</script>

</html>

---------------------------------------------------------------------------------------------------------------------------

Thanks in advance for your time.

Kind Regards,
Miky
 
M

Mick White

Mickey said:
Hi,

I am having trouble with a javascript.
The purpose of this script is to enable a user to click a generated
color cell in a table and the color code ie: #ffffff is returned to the
caller... ie: printed in a textfield on the calling page/form.

Presently, in Firefox.. this script will print the shell of a table
(just the borders...) and in IE I get nothing.

I would aprechiate it if someone had the time to look over this short
script (below) and perhaps suggest to me, where I am going wrong?

------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>

<script type="text/javascript" language="JavaScript">
<!--
function setColor(sentcolor)
{
document.f.c.value=sentcolor;
opener.document.createStyle.bgLink.value = sentcolor;
}


function getColorTable()
{
// Color code table
c = new Array('00', '33', '66', '99', 'cc', 'ff');
// Start color table
t = '<table border="1" cellpadding="6"
style="border-collapse:collapse;">';
// Iterate red color
for (r = 0; r < 6; r++)
{
// Iterate green color
for (g = 0; g < 6; g++)
{
// Start color table row
t += '<tr>';
// Iterate blue color
for (b = 0; b < 6; b++)
{
// Get RGB (background) color code
L = '#' + c[r] + c[g] + c;
// Get alternative/tooltip text
A = L + ' = RGB('
+ parseInt('0x' + c[r]) + ', '
+ parseInt('0x' + c[g]) + ', '
+ parseInt('0x' + c) + ')'
;
// Get "inverted" RGB (foreground) color code
F = '#' + c[5 - r] + c[5 - g] + c[5 - b];
// Color table cell
t += '<td align="center"'
+ ' style="'
+ 'background-color:' + L + ';'
+ 'color:' + F + ';'
+ 'font-family:Courier New;'
+ 'cursor:hand;'
+ '"'
+ ' title="' + A + '"'
+ ' onclick="setColor(\'' + L + '\');"'
//+ ' onclick="add_smilie(\'' + L + '\');"'
//+ ' onmouseover="window.status=\'' + A + '\';"'
//+ ' onmouseout="window.status=\' \';"'
+ '></td>'
;
}
// End color table row
t += '</tr>';
}
}

return t;
}
//-->
</script>
</head>
<body bgcolor='#1E2C38'>
<form name="f"><input type="text" size="7" name="c" value=""></form>
<script type="text/javascript" language="JavaScript">
<!--
document.write(getColorTable() + '</table>');
//-->
</script>

</html>
http://www.mickweb.com/javascript/colours/websafe.html

Mick
 
R

RobG

Mickey said:
Hi,

I am having trouble with a javascript.
The purpose of this script is to enable a user to click a generated
color cell in a table and the color code ie: #ffffff is returned to the
caller... ie: printed in a textfield on the calling page/form.

Presently, in Firefox.. this script will print the shell of a table
(just the borders...) and in IE I get nothing.

I would aprechiate it if someone had the time to look over this short
script (below) and perhaps suggest to me, where I am going wrong?

------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>

<script type="text/javascript" language="JavaScript">

The language attribute is depreciated, type is required.


HTML comments inside script tags serve no useful purpose and are
potentially harmful, just don't use them.

function setColor(sentcolor)
{
document.f.c.value=sentcolor;
opener.document.createStyle.bgLink.value = sentcolor;
}


function getColorTable()
{
// Color code table
c = new Array('00', '33', '66', '99', 'cc', 'ff');

Declaring variables inside functions without the 'var' keyword makes
them global. You shouldn't clutter the global space with stuff that
doesn't need to be there, so always make variables local whenever
possible. You can also use an initialiser to reduce code a bit:

var c = ['00', '33', '66', '99', 'cc', 'ff'];

// Start color table
t = '<table border="1" cellpadding="6"
style="border-collapse:collapse;">';

When posting code, manually wrap it at about 70 characters to stop auto
wrapping, otherwise errors may will be introduced that makes helping you
more difficult. 't' doesn't need to be global, so keep it local.

var t = '<table border="1" cellpadding="6"...

The table border and cellpadding attributes are better set using CSS.
// Iterate red color
for (r = 0; r < 6; r++)

Again, r is global. It is particularly important that counters be kept
local - you don't want some other function or routine modifying the
value of your counter.

for (var r=0; r<6; ++r)

{
// Iterate green color
for (g = 0; g < 6; g++)

Again...

for (var g=0; g<6; ++g)

{
// Start color table row
t += '<tr>';
// Iterate blue color
for (b = 0; b < 6; b++)

Ho hum...

for (var b=0; b<6; ++b)

{
// Get RGB (background) color code
L = '#' + c[r] + c[g] + c;

'L' is global unnecessarily and its value here (the first time through)
will be:

#000000,33,66,99,cc,ff

The array 'c' will be appended - I think you meant to write:

var L = '#' + c[r] + c[g] + c;

// Get alternative/tooltip text
A = L + ' = RGB('

Global again...

var A = L + ' = RGB('

+ parseInt('0x' + c[r]) + ', '
+ parseInt('0x' + c[g]) + ', '
+ parseInt('0x' + c) + ')'
;
// Get "inverted" RGB (foreground) color code
F = '#' + c[5 - r] + c[5 - g] + c[5 - b];

Again...

var F = '#' + c[5-r] + c[5-g] + c[5-b];

// Color table cell
t += '<td align="center"'
+ ' style="'
+ 'background-color:' + L + ';'
+ 'color:' + F + ';'
+ 'font-family:Courier New;'
+ 'cursor:hand;'
+ '"'

All of that style stuff can probably be better done using CSS - but
that's up to you. 'cursor: hand' is not W3C CSS, use 'cursor: pointer'.
+ ' title="' + A + '"'
+ ' onclick="setColor(\'' + L + '\');"'
//+ ' onclick="add_smilie(\'' + L + '\');"'
//+ ' onmouseover="window.status=\'' + A + '\';"'
//+ ' onmouseout="window.status=\' \';"'
+ '></td>'
;

As an alternative to building a big HTML string and using
document.write, below is a DOM version.

[...]


function setColor()
{
var colour = this.title.split('=')[0].replace(/\s/g,'');
document.f.c.value = colour;
if (opener && !opener.closed){
opener.document.createStyle.bgLink.value = sentcolor;
}
}


function colourTable()
{
// Color code table
var c = ['00', '33', '66', '99', 'cc', 'ff'];

// Start color table
var t = document.createElement('table');
t.style.border = '1px solid black';
t.style.borderCollapse = 'collapse';
var row, cell, L, A, F;

// Iterate red color
for (var r=0; r<6; ++r) {

// Iterate green color
for (var g=0; g<6; ++g) {

// Start color table row
row = t.insertRow(-1);

// Iterate blue color
for (var b=0; b<6; ++b) {
// Get RGB (background) color code
L = '#' + c[r] + c[g] + c;
// Get alternative/tooltip text
A = L + ' = RGB('
+ parseInt('0x' + c[r]) + ', '
+ parseInt('0x' + c[g]) + ', '
+ parseInt('0x' + c) + ')'
;
// Get "inverted" RGB (foreground) color code
F = '#' + c[5-r] + c[5-g] + c[5-b];

// Color table cell
// Most of this can be don in a style sheet
var cell = document.createElement('td');
cell.style.textAlign = 'center';
cell.style.backgroundColor = L;
cell.style.color = F;
cell.style.fontFamily = 'courier new';
cell.style.cursor = 'pointer';
cell.style.width = '1em';
cell.style.height = '1em';
cell.title = A;

// Add events
cell.onclick = setColor;
cell.onmouseover = onStatus;
cell.onmouseout = outStatus;

// Add cell to row
row.appendChild(cell);
}
}
}
return t;
}




</script>
</head>
<body style="background-color: #1E2C38">

<form name="f" action=""><div>
<input type="text" size="7" name="c" value="">
</div></form>
<div id="xx"></div>
<script type="text/javascript">
document.getElementById('xx').appendChild(colourTable());
</script>
 
M

Mickey

Hi again,

Thank's to both of you for the help and suggestions.
They were both really helpful to me.

Thanks again,
Miky
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top