One more: Online Designer?

[jmarcv]

From the past - the colorpicker.

Here is your revised color picker. Note the new third variable.
Variable 1 is as it was, the text or hidden field to contain the value of the color.
Variable 2 is still the thing you want to color, but it defaulted to coloring the background color.
The new var 3 is either B (for background color) or C (for color, or font color)

          <img src="http://www.rlhanson-online.com/desig...gner/color.jpg" align="absmiddle" style="cursor:pointer" onclick="showColorGrid3('COLOR','cardTemplate','C');" />

Here is the revised 301a.js code

//*******************************************************************************
//Title:      FCP Combo-Chromatic Color Picker
//URL:        Color Picker : HTML, Java Script, RGB, Popup, DHTML, Selector
//Product No. FCP201a
//Version:    1.2
//Date:       10/01/2006
//NOTE:       Permission given to use this script in ANY kind of applications IF
//            script code remains UNCHANGED and the anchor tag "powered by FCP"
//            remains valid and visible to the user.
//
//  Call:     showColorGrid3("input_field_id","span_id")
//  Add:      <DIV ID="COLORPICKER301" CLASS="COLORPICKER301"></DIV> anywhere in body
/*
JMVWare.com mod - Feb 2008
add 3rd Parameter which can be B or C
eg: showColorGrid3("input_field_id","mySampleElementId","C")
existing code changed bacground style of span_id.
This is maintained with the B option.  Added a C option to change the font color of mySampleElementId
*/
//*******************************************************************************
function getScrollY(){var scrOfX = 0,scrOfY=0;if(typeof(window.pageYOffset)=='number'){scrOfY=window.pageYOffset;scrOfX=window.pageXOffset;}else if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){scrOfY=document.body.scrollTop;scrOfX=document.body.scrollLeft;}else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){scrOfY=document.documentElement.scrollTop;scrOfX=document.documentElement.scrollLeft;}return scrOfY;}document.write("<style>.colorpicker301{text-align:center;visibility:hidden;display:none;position:absolute;background-color:#FFF;border:solid 1px #CCC;padding:4px;z-index:999;filter:progid:DXImageTransform.Microsoft.Shadow(color=#D0D0D0,direction=135);}.o5582brd{border-bott6om:solid 1px #DFDFDF;border-right:solid 1px #DFDFDF;padding:0;width:12px;height:14px;}a.o5582n66,.o5582n66,.o5582n66a{font-family:arial,tahoma,sans-serif;text-decoration:underline;font-size:9px;color:#666;border:none;}.o5582n66,.o5582n66a{text-align:center;text-decoration:none;}a:hover.o5582n66{text-decoration:none;color:#FFA500;cursor:pointer;}.a01p3{padding:1px 4px 1px 2px;background:whitesmoke;border:solid 1px #DFDFDF;}</style>");
function gett6op6(){csBrHt=0;if(typeof(window.innerWidth)=='number'){csBrHt=window.innerHeight;}else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){csBrHt=document.documentElement.clientHeight;}else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){csBrHt=document.body.clientHeight;}ctop=((csBrHt/2)-132)+getScrollY();return ctop;}
function getLeft6(){var csBrWt=0;if(typeof(window.innerWidth)=='number'){csBrWt=window.innerWidth;}else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){csBrWt=document.documentElement.clientWidth;}else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){csBrWt=document.body.clientWidth;}cleft=(csBrWt/2)-125;return cleft;}var nocol1="&#78;&#79; &#67;&#79;&#76;&#79;&#82;",clos1="&#67;&#76;&#79;&#83;&#69;",tt6="&#70;&#82;&#69;&#69;&#45;&#67;&#79;&#76;&#79;&#82;&#45;&#80;&#73;&#67;&#75;&#69;&#82;&#46;&#67;&#79;&#77;",hm6="&#104;&#116;&#116;&#112;&#58;&#47;&#47;&#119;&#119;&#119;&#46;";hm6+=tt6;tt6="&#80;&#79;&#87;&#69;&#82;&#69;&#68; &#98;&#121; &#70;&#67;&#80;";
function setCCbldID6(objID,val){document.getElementById(objID).value=val;}
function setCCbldSty6(objID,prop,val){switch(prop){case "bc":if(objID!='none'){
 e=document.getElementById(objID).style;
 if (styletype=='C') e.color=val;
 if (styletype=='B') e.backgroundColor=val;
}
break;case "vs":document.getElementById(objID).style.visibility=val;break;case "ds":document.getElementById(objID).style.display=val;break;case "tp":document.getElementById(objID).style.top=val;break;case "lf":document.getElementById(objID).style.left=val;break;}}
function putOBJxColor6(OBjElem,Samp,pigMent){if(pigMent!='x'){ setCCbldID6(OBjElem,pigMent);setCCbldSty6(Samp,'bc',pigMent);}setCCbldSty6('colorpicker301','vs','hidden');setCCbldSty6('colorpicker301','ds','none');}
function showColorGrid3(OBjElem,Sam,styletyperef){var objX=new Array('00','33','66','99','CC','FF');
styletype=styletyperef;
if (!styletype) styletype='B';
var c=0;
var z='"'+OBjElem+'","'+Sam+'",""';
var xl='"'+OBjElem+'","'+Sam+'","x"';
var mid='';
mid+='<center><table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #F0F0F0;padding:2px;"><tr>';
mid+="<td colspan='18' align='left' style='font-size:10px;background:#6666CC;color:#FFF;font-family:arial;'>&nbsp;Combo-Chromatic Selection Palette</td></tr><tr><td colspan='18' align='center' style='margin:0;padding:2px;height:14px;' ><input class='o5582n66' type='text' size='10' id='o5582n66' value='#FFFFFF'><input class='o5582n66a' type='text' size='2' style='width:14px;' id='o5582n66a' onclick='javascript:alert(\"click on selected swatch below...\");' value='' style='border:solid 1px #666;'>&nbsp;|&nbsp;<a class='o5582n66' href='javascript:onclick=putOBJxColor6("+z+")'><span class='a01p3'>"+nocol1+"</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a class='o5582n66' href='javascript:onclick=putOBJxColor6("+xl+")'><span class='a01p3'>"+clos1+"</span></a></td></tr><tr>";
var br=1;
for(o=0;o<6;o++){
 mid+='</tr><tr>';
 for(y=0;y<6;y++){
  if(y==3){
   mid+='</tr><tr>';
  }
  for(x=0;x<6;x++){
   var grid='';
   grid=objX[o]+objX[y]+objX[x];
   var b="'"+OBjElem+"', '"+Sam+"','#"+grid+"'";
   mid+='<td class="o5582brd" style="background-color:#'+grid+'"><a class="o5582n66"  href="javascript:onclick=putOBJxColor6('+b+');" onmouseover=javascript:document.getElementById("o5582n66").value="#'+grid+'";javascript:document.getElementById("o5582n66a").style.backgroundColor="#'+grid+'";  title="#'+grid+'"><div style="width:12px;height:14px;"></div></a></td>';
   c++;
  }
 }
}
 mid+='</tr></table>';
 var objX=new Array('0','3','6','9','C','F');
 var c=0;
 var z='"'+OBjElem+'","'+Sam+'",""';
 var xl='"'+OBjElem+'","'+Sam+'","x"';
 mid+='<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #F0F0F0;padding:1px;"><tr>';
 var br=0;
 for(y=0;y<6;y++){
  for(x=0;x<6;x++){
   if(br==18){
    br=0;
    mid+='</tr><tr>';
   }
   br++;
   var grid='';
   grid=objX[y]+objX[x]+objX[y]+objX[x]+objX[y]+objX[x];
   var b="'"+OBjElem+"', '"+Sam+"','#"+grid+"'";
   mid+='<td class="o5582brd" style="background-color:#'+grid+'"><a class="o5582n66"  href="javascript:onclick=putOBJxColor6('+b+');" onmouseover=javascript:document.getElementById("o5582n66").value="#'+grid+'";javascript:document.getElementById("o5582n66a").style.backgroundColor="#'+grid+'";  title="#'+grid+'"><div style="width:12px;height:14px;"></div></a></td>';
   c++;
  }
 }
 mid+="</tr><tr><td colspan='18' align='right' style='padding:2px;border:solid 1px #FFF;background:#FFF;'><a href='"+hm6+"' style='color:#666;font-size:8px;font-family:arial;text-decoration:none;lett6er-spacing:1px;'>"+tt6+"</a></td>";
 mid+='</tr></table></center>';
 setCCbldSty6('colorpicker301','tp','100px');
 document.getElementById('colorpicker301').style.top=gett6op6();
 document.getElementById('colorpicker301').style.left=getLeft6();
 setCCbldSty6('colorpicker301','vs','visible');
 setCCbldSty6('colorpicker301','ds','block');
 document.getElementById('colorpicker301').innerHTML=mid;
}

[Websync]

This is such a cool thread! Thank you for keeping it public. When I have a few hours to spare I will read through it!

John-Marc - are you one of the programmers for the GlowHost website?

[rlhanson]

From the past - the colorpicker.

Thank you, thank you, thank you! I've decided to use it for background right now, but may change my mind later on - VERY thankful you made it capable for both text or background.

I have been working on the design elements now, along with the programming, and have a glitch perhaps one of you could make a suggestion on...

I will have a page with different layout selections, once a user selects a layout, they will arrive at a page similiar to this one:

RL Hanson-Online Business Card Designer

If they attempt to choose a background color after selecting a background image, it will not work unless they select the "No image" button which has a value of: transparent.

Is there any way to program the color selector button to change the background property to original state if clicked?

This is getting EXCITING!!!

[jmarcv]

John-Marc - are you one of the programmers for the GlowHost website?

Yes, most of my work is in the backend admin when you log in to your account, service monitoring, etc.

[jmarcv]

Is there any way to program the color selector button to change the background property to original state if clicked?

OK, I am going to try to let you figure this one out. If you look back, you will see 2-3 times I mentioned (and stressed) that Javascript commands are stackable, so that you can execute more than one.
For example: Here, you are putting in the word bold or normal in your hidden var, then you (see the semi-colon?) change the element in your template to show bold.

onclick="document.getElementById('BOLDname').value=(document.getElementById('BOLDname').value=='bold' ? 'normal' : 'bold'); document.getElementById('nameS').style.fontWeight=document.getElementById('BOLDname').value;"/>

So you need to do the same thing that would happen when a user clicks that when they click the color picker. The first thing you need to do is add an id to that radio button
id="noart"
Then, here is one of the 2 commands you will need to add to the existing colorgrid command
document.getElementById('noart').checked=true;

[jmarcv]

I've decided to use it for background right now,

It? In case its not obvious, you can use it any number of times on the page, in each case have it control something different. One for the background, hell, one for each font line if you want to go nuts!

[Matt]

John-Marc = Glow-Pimp

[rlhanson]

It? In case its not obvious, you can use it any number of times on the page, in each case have it control something different.

Yeh, I guess I haven't mastered speaking (writing) eloquently enough while trying to learn what exactly each "it" does, let alone how to reference to "them".

John-Marc = Glow-Pimp

I agree!

[jmarcv]

Yeah, I guess I haven't mastered speaking (writing) eloquently enough while trying to learn what exactly each "it" does, let alone how to reference to "them".

Not a grammar lesson here, just want to make sure you weren't thinking you could ONLY use one. Limitations are do boring...

I agree!

Matt = my bizzle

[rlhanson]

John-Marc -
I successfully got the code figured out!

<input type="hidden" name="COLORBkgrd" id="noart" />
              <img src="../images/designer/color.jpg" align="absmiddle" title="Choose Color" style="cursor:pointer" onclick="document.getElementById('noart').checked=true;document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)';showColorGrid3('COLOR','cardTemplate','B')"/>&nbsp;
              <input type="text" id="COLORcompanyName" name="COLOR" size="9" />

Are you proud?! The only problem is the colorpicker doesn't work in firefox. What am I doing wrong?
RL Hanson-Online Business Card Designer