Coding Forum

**Jaspworld** · 08-31-2004, 05:05 PM

Could someone help me correct my color picker:

I'm using frames so the three files are:

New.html

<HTML>
<HEAD>
<TITLE>ColorPicker II</TITLE>
</HEAD>

<FRAMESET ROWS="300,*">
<FRAME SRC="test.html" NAME="test" MARGINWIDTH="1" MARGINHEIGHT="1">
<FRAME SRC="result.html" NAME="result">
</FRAMESET>

</HTML>

Test.html

<BODY onload="chsty()">

<SCRIPT language="javascript">
window.document.write("<FONT color='red'>Color Picker 1.0  <A HREF='http://www.freewebsite.5u.com'>Free Website</A></FONT><BR><BR>");

var hex_colors = new Array('330000','333300','336600','339900','33CC00' ,'33FF00','66FF00','66CC00','669900','666600','663 300','660000','FF0000','FF3300','FF6600','FF9900', 'FFCC00','FFFF00','330033','333333','336633','3399 33','33CC33','33FF33','66FF33','66CC33','669933',' 666633','663333','660033','FF0033','FF3333','FF663 3','FF9933','FFCC33','FFFF33','330066','333366','3 36666','339966','33CC66','33FF66','66FF66','66CC66 ','669966','666666','663366','660066','FF0066','FF 3366','FF6666','FF9966','FFCC66','FFFF66','330099' ,'333399','336699','339999','33CC99','33FF99','66F F99','66CC99','669999','666699','663399','660099', 'FF0099','FF3399','FF6699','FF9999','FFCC99','FFFF 99','3300CC','3333CC','3366CC','3399CC','33CCCC',' 33FFCC','66FFCC','66CCCC','6699CC','6666CC','6633C C','6600CC','FF00CC','FF33CC','FF66CC','FF99CC','F FCCCC','FFFFCC','3300FF','3333FF','3366FF','3399FF ','33CCFF','33FFFF','66FFFF','66CCFF','6699FF','66 66FF','6633FF','6600FF','FF00FF','FF33FF','FF66FF' ,'FF99FF','FFCCFF','FFFFFF','0000FF','0033FF','006 6FF','0099FF','00CCFF','00FFFF','99FFFF','99CCFF', '9999FF','9966FF','9933FF','9900FF','CC00FF','CC33 FF','CC66FF','CC99FF','CCCCFF','CCFFFF','0000CC',' 0033CC','0066CC','0099CC','00CCCC','00FFCC','99FFC C','99CCCC','9999CC','9966CC','9933CC','9900CC','C C00CC','CC33CC','CC66CC','CC99CC','CCCCCC','CCFFCC ','000099','003399','006699','009999','00CC99','00 FF99','99FF99','99CC99','999999','996699','993399' ,'990099','CC0099','CC3399','CC6699','CC9999','CCC C99','CCFF99','000066','003366','006666','009966', '00CC66','00FF66','99FF66','99CC66','999966','9966 66','993366','990066','CC0066','CC3366','CC6666',' CC9966','CCCC66','CCFF66','000033','003333','00663 3','009933','00CC33','00FF33','99FF33','99CC33','9 99933','996633','993333','990033','CC0033','CC3333 ','CC6633','CC9933','CCCC33','CCFF33','000000','00 3300','006600','009900','00CC00','00FF00','99FF00' ,'99CC00','999900','996600','993300','990000','CC0 000','CC3300','CC6600','CC9900','CCCC00','CCFF00') ;

window.document.write("<table border=0 cellspacing=0 cellpadding=0><tr><td><Table border=1 CELLSPACING=0 CELLPADDING=0 bordercolor=black><TR>");
for (var loop = 0; loop <hex_colors.length; loop++)
{
window.document.write("<TD bgColor="+hex_colors[loop]+"><SPAN style='cursor:hand;' onClick=chsty('"+hex_colors[loop]+"','"+hex_colors[loop]+"')><FONT size=1>   </FONT></SPAN></TD>");
if(loop==17||loop==35||loop==53||loop==71||loop==8 9||loop==107||loop==125||loop==143||loop==161||loo p==179||loop==197) {
window.document.write("</TR>")
}
}

window.document.write("</TD></TR></Table><TD valign=top>")

function chsty(hc,hb) {
var gbw; var gbe; var gbr; var gbq; var gbg;

ital="ai";
bol="ab";
ty="att"

if(window.document.rdButtn.pgpr[0].checked == true) {
gbg=hc;
}

if(parent.test.document.sbi.bold1.checked == true) {bol="b"}
if(parent.test.document.sbi.italic1.checked == true) {ital="i"}
if(parent.test.document.sbi.typewriter1.checked == true) {ty="tt"}

if(window.document.rdButtn.pgpr[1].checked == true) {
gbq=hb; }
if(window.document.rdButtn.pgpr[2].checked == true) {
gbw=hc; }
if(window.document.rdButtn.pgpr[3].checked == true) {
gbe=hc; }
if(window.document.rdButtn.pgpr[4].checked == true) {
gbr=hc; }

cur_font = parent.test.document.sbi.fontlist[parent.test.document.sbi.fontlist.selectedIndex].value;
cur_fontsize = parent.test.document.sbi.fontsize[parent.test.document.sbi.fontsize.selectedIndex].value;

parent.result.document.clear();
parent.result.document.open();
parent.result.document.write("<HTML><HEAD><TITLE>C olor picker 1.0</TITLE></HEAD>");
parent.result.document.write("<BODY bgColor='"+gbg+"'>");
parent.result.document.write("<FONT color='red' size='6'>Results</FONT><BR><BR>");
parent.result.document.write("<FONT face=\"" + cur_font + "\" size=\"" + cur_fontsize + "\" color=\"#" + gbq + "\"><" + ty +"><" + ital + "><" + bol + ">This is text</" + bol + "></" + ital + "></"+ ty +"></FONT><BR>");
parent.result.document.write("<FONT face=\"" + cur_font + "\" size=\"" + cur_fontsize + "\" color=\"#" + gbw + "\"><" + ty +"><" + ital + "><" + bol + ">This is a link</" + bol + "></" + ital + "></"+ ty +"></FONT><BR>");
parent.result.document.write("<FONT face=\"" + cur_font + "\" size=\"" + cur_fontsize + "\" color=\"#" + gbe + "\"><" + ty +"><" + ital + "><" + bol + ">This is vlink</" + bol + "></" + ital + "></"+ ty +"></FONT><BR>");
parent.result.document.write("<FONT face=\"" + cur_font + "\" size=\"" + cur_fontsize + "\" color=\"#" + gbr + "\"><" + ty +"><" + ital + "><" + bol + ">This is alink</" + bol + "></" + ital + "></"+ ty +"></FONT><BR>");

parent.result.document.write("<FONT face=\"" + cur_font + "\" size=\"" + cur_fontsize + "\" color=\"#" + gbq + "\"><" + ty +"><" + ital + "><" + bol + "><BODY bgColor=#"+gbg+" text=#"+gbq+"></" + bol + "></" + ital + "></"+ ty +"></FONT>");
}
</SCRIPT>

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD>
<FORM name="rdButtn">
  
<INPUT TYPE="radio" NAME="pgpr" CHECKED>Background
<INPUT TYPE="radio" NAME="pgpr">Text
<INPUT TYPE="radio" NAME="pgpr">Link
<INPUT TYPE="radio" NAME="pgpr">Visited link
<INPUT TYPE="radio" NAME="pgpr">Active link

</FORM>
<FORM name="sbi">
    
Set background image:
<INPUT TYPE="file" SIZE="22" NAME="sebgi" STYLE="font-size:8pt;">
<INPUT TYPE="button" VALUE="Set Background" STYLE="font-size:8pt;"> <BR>
     Font face
<SELECT NAME="fontlist" onChange="chsty();">
<OPTION VALUE="andale mono">Andale Mono
<OPTION VALUE="arial">Arial
<OPTION VALUE="comic sans ms">Comic Sans MS
<OPTION VALUE="courier new">Courier New
<OPTION VALUE="georgia">Georgia
<OPTION VALUE="impact">Impact
<OPTION VALUE="times new roman" SELECTED>Times New Roman
<OPTION VALUE="trebuchet ms">Trebuchet MS
<OPTION VALUE="verdana">Verdana
</SELECT>    
Font size
<SELECT NAME="fontsize" onChange="chsty();">
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3" SELECTED>3
<OPTION VALUE="4">4
<OPTION VALUE="5">5
<OPTION VALUE="6">6
<OPTION VALUE="7">7
</SELECT><BR><BR>
    
<INPUT TYPE="checkbox" NAME="bold1" onClick="chsty();chkpar();"><B>Bold</B>
<INPUT TYPE="checkbox" NAME="italic1" onClick="chsty();"><I>Italic</I>
<INPUT TYPE="checkbox" NAME="typewriter1" onClick="chsty();"><TT>Typewriter</TT>
</FORM>
</TD>
</TR></Table>
</Table>

Reult.html

Empty Empty Empty

**webwoRRks** · 09-01-2004, 06:26 AM

The problem is you are using way too much code to achieve your results. That hex colour array could either be scrapped, or at least put in its own file.

**webwoRRks** · 09-01-2004, 06:28 AM

Also, I suggest you ignore document.writeln completely, and use document.body.innerHTML.

**webwoRRks** · 09-01-2004, 06:33 AM

Sorry, that wasn't very helpful of me. Please can you tell us what browser its been tested in, and give us the URL of an example page?

**Jaspworld** · 09-01-2004, 11:22 AM

Ok. I'll use innerHTML. But now I'm facing another problem:

<SCRIPT>
function chc() {
window.document.bgColor=document.getElementById('s tyle1').innerHTML.color;
}
</SCRIPT>

<P id="style1"><FONT color="green">Yes</FONT></P>
<INPUT type="button" onClick="chc()"; value="GO">

How can I make the bgColor change this way. Could this even be done.

**webwoRRks** · 09-02-2004, 06:02 AM

of course it is possible! I recommend you use styles instead (

) but ifyou don't want to, heres your code;

HTML Code:

<SCRIPT>
function chc() {
window.document.body.bgColor=document.getElementById('style1').innerHTML;
}
</SCRIPT>

<P><FONT color="green"><SPAN id="style1">green</SPAN> Yes</FONT></P>
<INPUT type="button" onClick="chc()"; value="GO">

**Jaspworld** · 09-02-2004, 08:59 AM

My color picker is almost complete. I didn't use frames this time cause I couldn't figure them out.

I've uploaded it temporarily at http://www.freewebsite.5u.com/miscallenous/result.html

**webwoRRks** · 09-02-2004, 07:05 PM

Is this your first full Javascript app? Its very clever, you're doing great

My first full app was a pong game

Keep up the good work, and if you need any further help we're all always here (seriously, we're just that sad).