One more: Online Designer?

[jmarcv]

What browser are you using?

You should use firefox and download the 'firebug' addon so you aren't in the dark:
These errors appear when you click a color.

relateColor is not defined
[IMG]chrome://firebug/content/blank.gif[/IMG] Color: <input type="button" onclick="showColorGrid3('COLORcompanyName','no...
form.html (line 85)


document.getElementById(objID) has no properties
[IMG]chrome://firebug/content/blank.gif[/IMG]function getScrollY(){var scrOfX = 0,scrOfY=0;if(typeof(window.pageYOffset)=='nu...
301a.js (line 14)

You are calling relateColor() - why? There IS no relateColor function that I see.
2. The second error seems to indicate that objID is not defined with a proper object.
I will assume also that objID is the id we pass it.

Now, we can assume that it refers to COLORcompanyName in the form.
and according to the script instructions:
// Call: showColorGrid3("input_field_id","span_id")

... and if we do a search on id=COLORcompanyName in your code, we see nothing.... and neither does the browser.

So here is a fundamental 'gotcha' in this.
name= is for form elements.
id= is for anything.
Any object can contain both. a name can be the same as an id.

So problem is, your code asks for an object ID and you gave it a name.
Try this:

Color: <input type="button" onclick="showColorGrid3('COLORcompanyName','none');" value="...">&nbsp;<input type="text" ID="COLORcompanyName" name="COLORcompanyName" size="9">

and get rid of this:

<script language="javascript">relateColor('companyName', getObj('color1').value);</script>

Now, I can tell you ahead of time, all you are doing is filling in the Color object. There can be great biblical gnashing of teeth trying to get the preview to change.

The obvious should be to do this:

onclick="showColorGrid3('COLORcompanyName','none');document.getElementById("companyName").style.color=document.getElementById(o"COLORcompanyName").value;" 

Remember that I said you can do multiple JS commands by separating them with a semi-colon.
Simple! We call the color picker, and then we get the color the picker put in the field and apply it to the preview!

Let me save you the agony. Javascript is not modal. Which means, it won't wait for you to choose a color. It will execute the color picker and then do the second part quicker than you can even focus on the colors, no matter what strength your coffee is.


So we put the second part in an 'onChange' on COLORcompanyName and when the color picker changes it it changes the preview!
Nice try. onChange should be renamed to onHumanChange. It doesn't get triggered by JS itself.

What to do.... to be continued.

[rlhanson]

Okay - I got the last part for the bold and italic images, and I even used the same concept for the color picker button - so everything looks pretty now.

I finally (kind of) got the color picker to change the companyName after reading back a little on the name and id thing, and trying different combinations. The really funny thing is the only way the color changes is to click on the colorpicker image, select the color, click on the colorpicker image again - and this is when the color changes in the cardTemplate.

SO...I know I have the change function screwy, it's not updating from the text field that the colrpicker is updating...anyway - I'm still thinking through this.

I originally couldn't get any of the examples to work, then managed to get the 1st one working after looking very closely at the syntax - and woohoo actually recognized a typing error! Are you proud yet? No, well, I'm still hanging in there!

Here's the code I have with the screwy color picker thing and the successful bold/italic code:

<input type="hidden" name="BOLDcompanyName" id="BOLDcompanyName" >
<IMG src="../images/designer/bold.jpg" style="cursor:pointer" onClick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value=='bold' ? 'normal' : 'bold'); document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>
<input type="hidden" name="ITALcompanyName" id="ITALcompanyName" >
<IMG src="../images/designer/italic.jpg" style="cursor:pointer" onClick="document.getElementById('ITALcompanyName').value=(document.getElementById('ITALcompanyName').value=='italic' ? 'normal' : 'italic'); document.getElementById('companyName').style.fontStyle=document.getElementById('ITALcompanyName').value;"/>
 
<div id="colorpicker301" class="colorpicker301"></div>
<input type="hidden" name="COLORcompanyName" id="COLORcompanyName" /> <IMG src="../images/designer/color.jpg" style="cursor:pointer" onClick="showColorGrid3('COLOR','none');document.getElementById('companyName').style.color=document.getElementById('COLOR').value; ">&nbsp;<input type="text" ID="COLORcompanyName" name="COLOR" size="9" />

Just thought you'd like to see it working a bit.